首先看你代码里的明显问题——你在设置border样式的时候多写了个分号！

// 错误写法：字符串里带了CSS语句末尾的分号
label.style.border = "4px solid red;"
// 正确写法：去掉末尾的分号，只保留纯CSS值
label.style.border = "4px solid red"

DOM元素的style属性接受的是纯CSS属性值，不需要加语句结尾的分号，这个语法错误直接导致样式没生效。而修改文本的innerText不受这个语法影响，所以你会看到文本能正常修改，但样式完全没反应。

另外还要提醒你一个隐藏的坑：你直接把template.content追加到组件里，第一次创建组件时会把模板的内容“移走”，第二次创建该组件的时候，模板内容就空了！所以一定要用cloneNode(true)做深克隆，确保每次创建组件都能拿到完整的模板内容：

// 改成深克隆，避免重复使用组件时出现内容丢失
this.appendChild(templateContent.cloneNode(true))

接下来给你补充几种修改Web组件内部样式的常用方法：

1. 直接修改内联样式（inline style） #

就是你原本的思路，修正语法后就能正常工作：

label.style.border = "4px solid red"
// 也可以拆分单独设置各个属性，更清晰
label.style.borderWidth = "4px"
label.style.borderStyle = "solid"
label.style.borderColor = "red"

2. 通过CSS类控制样式 #

这种方式更符合样式与逻辑分离的原则，也更易于维护。先在全局CSS里定义类：

.red-border-label {
  border: 4px solid red;
  padding: 8px;
  background-color: #f5f5f5;
}

然后在JS里给元素添加类：

label.classList.add('red-border-label')
// 移除类用 classList.remove('red-border-label')
// 切换类（存在则移除，不存在则添加）用 classList.toggle('red-border-label')

3. 使用Shadow DOM隔离样式（推荐复杂组件使用） #

如果你希望组件的样式不被全局CSS干扰，也不影响全局样式，可以用Shadow DOM实现样式隔离。在Shadow根里添加组件专属的样式：

class GeneratorView extends HTMLElement {
  connectedCallback() {
    // 创建Shadow根，mode设为open允许外部访问内部元素
    const shadowRoot = this.attachShadow({ mode: 'open' })
    
    // 克隆模板内容
    const template = document.getElementById('generator-template')
    const templateContent = template.content.cloneNode(true)
    
    // 创建组件专属样式
    const style = document.createElement('style')
    style.textContent = `
      #label {
        border: 4px solid red;
        font-size: 16px;
        margin: 10px;
      }
      /* 还可以定义其他组件内部的样式规则 */
    `
    
    // 把样式和模板内容添加到Shadow根
    shadowRoot.appendChild(style)
    shadowRoot.appendChild(templateContent)
    
    // 修改文本依然正常工作
    const label = shadowRoot.querySelector("#label")
    label.innerText = "The text has changed"
  }
}
customElements.define('generator-view', GeneratorView)

用Shadow DOM的话，组件内部的样式完全隔离，不会和全局样式冲突，这也是Web组件的核心特性之一。

内容的提问来源于stack exchange，提问作者Kokodoko