CSS 样式未应用于自定义组件

Question

我创建了一个自定义 Web 组件（没有任何框架）。然后我用模板标签中的内容填充它。

最后，我使用 Javascript 编辑了内容。这很好用。不起作用的是使用 Javascript 编辑样式。为什么会这样，如何使用代码在 Web 组件中编辑 CSS？

class GeneratorView extends HTMLElement {

    connectedCallback() {

        // Use a template to fill this component
        const template = document.getElementById('generator-template')
        const templateContent = template.content
        this.appendChild(templateContent)

        // find the label tag in this component
        const label = this.querySelector("#label")

        // THIS WORKS - set the label text
        label.innerText = "The text has changed"

        // THIS DOESN'T WORK - set the label style
        label.style.border = "4px solid red;"
    }
}

customElements.define('generator-view', GeneratorView)

模板看起来像这样

<template id="generator-template">
        <div id="label">
            Change this text
        </div>
</template>

Answer 1

问题是您在样式中添加了分号。

分号仅供 CSS 解析器用来了解 css 值之间的分隔符。在最后一个值之后不需要一个，并且在元素的样式属性中设置值时不能使用它们。

我简化了你的代码来演示。

带分号

const template = `<div id="label">Change this text</div>`;

class GeneratorView extends HTMLElement {
  connectedCallback() {
    this.innerHTML = template;
    const label = this.querySelector("#label");
    label.innerText = "The text has changed";
    label.style.border = "4px solid red;"
  }
}

customElements.define('generator-view', GeneratorView);

<generator-view></generator-view>

没有分号

const template = `<div id="label">Change this text</div>`;

class GeneratorView extends HTMLElement {
  connectedCallback() {
    this.innerHTML = template;
    const label = this.querySelector("#label");
    label.innerText = "The text has changed";
    label.style.border = "4px solid red";
  }
}

customElements.define('generator-view', GeneratorView);

<generator-view></generator-view>

CSS 样式未应用于自定义组件

CSS Style not applied on custom component

javascript

css

web-component

typescript

native-web-component