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

我创建了一个自定义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>

更改此文本

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

分号仅由CSS解析器用于知道CSS值之间的间隔。最后一个值之后不需要一个值，在元素的“样式”属性中设置值时也不能使用它们

我简化了您的代码以进行演示

用分号

const template=`Change this text`；
类GeneratorView扩展了HtmleElement{
connectedCallback（）{
this.innerHTML=模板；
const label=this.querySelector（“标签”）；
label.innerText=“文本已更改”；
label.style.border=“4px纯红色；”
}
}
自定义元素。定义（'generator-view'，GeneratorView）
您的
查询选择器的实现是什么样子的？arrrg简直不敢相信它是如此简单！