是否可以插入shadowRoot的样式？

Question

我正在尝试使用 Vanilla 自定义元素，但似乎无法插入样式标签：

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);

<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>

Answer 1

可能，但有限制

您的示例可以通过使用 part 属性 和 pseudo-class ::part 来工作。然而，这是一个非常有限的解决方案，因为样式只能应用于指定的部分（有关详细信息，请参阅文档）。它可能会给组件的用户带来可用性问题，即必须了解部件名称、语法和限制。

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);

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

<my-element>
  <style slot="my-style">
    ::part(foo) { color: green; } <!-- works -->
    ::part(foo):hover { color: blue; } <!-- works -->
    ::part(foo)>i { color: red; } <!-- fails -->
  </style>
</my-element>