能否为ShadowRoot插槽传入style标签？Vanilla自定义元素疑问

在进行Vanilla自定义元素实验时，发现无法通过插槽（slot）将style标签传入ShadowRoot，导致传入的样式无法作用于Shadow DOM内的元素。相关代码如下：

代码示例 #

JavaScript #

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: "open"});
  }
  connectedCallback() {
    this.shadowRoot.append(document.getElementById('my-element-template').content.cloneNode(true));
  }
}
window.customElements.define("my-element", MyElement);

HTML #

<template id="my-element-template">
  <slot name="my-style">
    <style>
      p { color: red; }
    </style>
  </slot>
  <p>Why am I still red instead of green?</p>
</template>

<my-element>
  <style slot="my-style">
    p { color: green; }
  </style>
</my-element>

原因分析 #

插槽的内容（包括你传入的style标签）属于主DOM树，并非Shadow DOM的一部分。因此，这个style标签的样式规则只会作用于主DOM中的元素，无法穿透到Shadow Root内部，所以Shadow DOM里的p标签还是会使用模板中默认的红色样式。

解决方案 #

方案1：提取外部style内容注入Shadow Root #

通过获取插槽分配的节点，提取外部style的内容，在Shadow Root内创建新的style元素并插入，让样式作用于Shadow DOM：

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: "open"});
  }
  connectedCallback() {
    this.shadowRoot.append(document.getElementById('my-element-template').content.cloneNode(true));
    
    // 获取插槽及分配的style节点
    const styleSlot = this.shadowRoot.querySelector('slot[name="my-style"]');
    const assignedStyle = styleSlot.assignedNodes().find(node => node.tagName === 'STYLE');
    
    if (assignedStyle) {
      // 在Shadow Root中创建新的style元素并注入内容
      const shadowStyle = document.createElement('style');
      shadowStyle.textContent = assignedStyle.textContent;
      this.shadowRoot.prepend(shadowStyle);
    }
  }
}
window.customElements.define("my-element", MyElement);

方案2：使用CSS自定义属性（推荐） #

利用Shadow DOM支持CSS变量的特性，通过外部设置自定义属性来控制内部样式，更符合Shadow DOM的封装设计：

修改后的HTML模板

<template id="my-element-template">
  <style>
    p { color: var(--text-color, red); }
  </style>
  <p>Now I can change color!</p>
</template>

<my-element style="--text-color: green;"></my-element>

这种方式不需要传递style标签，外部只需通过自定义属性就能灵活修改Shadow DOM内的样式，同时避免了外部样式直接污染内部DOM结构。

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