Início / coding / Perguntas / 79058104
Accepted
Fravadona
Asked: 2024-10-06 07:13:16 +0800 CST

É possível inserir o estilo de um shadowRoot?

  • 772

Estou experimentando elementos personalizados do Vanilla e não parece possível inserir uma tag de estilo:

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 respostas

  1. Best Answer

    Atualização - Mover elementos de estilo para ShadowDOM

    A solução original funcionou, mas os comentaristas sugeriram melhorias. Os elementos de estilo dentro de um slot se comportam de forma diferente de outros elementos de tipos. Eles aparecem no DOM em vez do ShadowDOM do componente. É por isso que o código do OP não funcionou como esperado. A solução original corrigiu isso usando shadowRoot.adoptedStyleSheets , mas essas etapas eram desnecessárias. A solução mais simples é mover os elementos de estilo diretamente para o ShadowDOM.

    É importante ressaltar que isso se aplica somente aos estilos adicionados aos slots e não aos estilos na definição do componente.

    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>

    Solução original - funciona, mas é prolixo

    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

relate perguntas