Appending CSS into the shadow DOM

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/shadow-append-css": "..."
    }
  }
</script>
<script type="module">
  import shadowAppendCss from '@w0s/shadow-append-css';

  class MyElement extends HTMLElement {
    constructor() {
      super();

      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = '<slot></slot>';

      const cssString = `
        :host {
          display: block flow;
          align-content: center;
          background: #f00;
          block-size: 10em;
          inline-size: 10em;
          text-align: center;
          color: #000;
        }
      `;

      shadowAppendCss(shadow, cssString);
    }
  }

  customElements.define('my-element', MyElement);
</script>

<my-element>
  <p>text</p>
</my-element>