← Back to context

Comment by JimDabell

6 months ago

You can’t. At minimum you need to call customElements.define().

You absolutely can. It's the primary purpose of the DSD (Declarative Shadow DOM), one of the many new specifications people complain incessantly about.

  <my-component>
    <template shadowrootmode="open">
      <style>
        ::slotted(*) {
          font-weight: bold;
          font-family: sans-serif;
        }
      </style>
      <slot></slot>
    </template>
    <p>content</p>
  </my-component>