主页 / coding / 问题 / 79058104
Accepted
Fravadona
Asked: 2024-10-06 07:13:16 +0800 CST

是否可以插入 shadowRoot 的样式？

  • 772

我正在尝试使用 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>

javascript

1 个回答

  1. Best Answer

    更新- 将样式元素移至 ShadowDOM

    原始解决方案有效，但评论者建议改进。插槽内的样式元素的行为与其他类型元素不同。它们出现在 DOM 中，而不是组件的 ShadowDOM 中。这就是 OP 的代码无法按预期工作的原因。原始解决方案使用shadowRoot.adoptedStyleSheets解决了这个问题，但这些步骤是不必要的。更简单的解决方案是将样式元素直接移入 ShadowDOM。

    重要的是，这仅适用于添加到插槽的样式，而不适用于组件定义中的样式。

    class MyElement extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: "open" })
  }
  connectedCallback() {
    const root = this.shadowRoot
    root.append(
      document.getElementById("my-element-template").content.cloneNode(true),
    )

    // a fix specific to OP's code
    root.querySelector("slot[name=my-style]")
      .assignedElements()
      .forEach((el) => root.append(el))

    // and a longer but more universal alternative
    // this.importStyles();
  }


  // A method to import css from any or all slots

  /**
   * Imports slot style elements from lightDOM to shadowDOM
   * @param {string} [slotname] A slot name or omit for all slots
   */
  importStyles(slotname) {
    slotname = slotname ? `slot[name="${slotname}"]` : "slot"
    const root = this.shadowRoot

    root.querySelectorAll(slotname).forEach((slot) => {
      slot.assignedElements().forEach((el) => {
        if (el instanceof HTMLStyleElement) {
          root.append(el)
        } else {
          el.querySelectorAll("style").forEach((style) => root.append(style))
        }
      })
    })
  }
}
window.customElements.define("my-element", MyElement)
    p { 
  font-weight: bold;
  color: orange;
}
    <p>This text is outside the component (global css)</p>

<template id="my-element-template">
  <div>
  <slot name="my-style">
    <style>
      p { color: red; }
    </style>
  </slot>
  </div>
    <p>
      This text is <i>inside</i> the component (component css)
    </p>
</template>

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

    原始解决方案-有效，但冗长

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

    // get the slot style element
    const node = root.querySelector('slot[name=my-style]')
    .assignedNodes()[0];

    // extract the css and adopt custom style
    if (node instanceof HTMLStyleElement) {
      const stylesheet = new CSSStyleSheet();
      stylesheet.replace( node.textContent );
      root.adoptedStyleSheets = [stylesheet];
      node.remove();
    }
    
  }
}
window.customElements.define("my-element", MyElement);
    p { 
  font-weight: bold;
  color: orange;
}
    <p>This text is outside the component (global css)</p>

<template id="my-element-template">
  <slot name="my-style">
    <style>
      p { color: red; }
    </style>
  </slot>
    <p>
      This text is <i>inside</i> the component (component css)
    </p>
</template>

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

    • 1

相关问题