Register rendering effects and handle events for shadow root as well

[jaredcwhite]

I appreciate Masto's focus on server-rendered HTML, and now that declarative shadow DOM (DSD) is widely available, it's possible that HTML might include DSD templates as well. It would be cool if Reactive Masto could also set up event listeners / effects rendering for the element's shadowRoot (if present), then the same syntax could be used for both light DOM content and shadow DOM content.

[mb21]

I think I got something working: 34834ad

With that commit, you can now attach a shadowdom either in your connectedCallback:

connectedCallback() {
  this.attachShadow({ mode: "open" })
  super.connectedCallback()
}

or in your constructor, and in both cases the event listeners and bindings still work. Full example with constructor:

import { html, ReactiveElement, signal } from 'mastro/reactive'

customElements.define('my-counter', class extends ReactiveElement {
  count = signal(0)

  constructor() {
    super()
    this.attachShadow({ mode: "open" })
  }

  initialHtml () {
    return html`
      Counting <slot data-bind="count">0</slot>
      <button data-onclick='inc'>+</button>
    `
  }

  inc () {
    this.count.set(c => c + 1)
  }
})

is this what you had in mind?