aalin / rdom Goto Github PK

So for each element, generate /.rdom/BxI-H0gjVsQV9oRAejuH.html with the following contents:

<style>@import url(XCpQkoNvHXVvo8F_EUn3.css);</style>
<div><h3><slot name="s0"></slot></h3><p><slot name="s1"></slot></p></div>

And then, Patches.DefineCustomElement() would just fetch that file.. and then there should be some logic to defer some calls until the element has been defined, using CustomElementRegistry.whenDefined()... We can't assign slots or callbacks until the element has been defined and connected... but we can still create all the DOM structures we need.

Something like this maybe:

const Patches = {
  /* ... */
  async DefineCustomElement(name, src) {
    const template = createTemplate(await fetchHTML(src))
    customElements.define(
      name,
      class extends RDOMElement { static template = template }
    )
  },
  AssignSlot(id, name, ids) {
    whenDefined(this.nodes.get(id), (node) => {
      node.assignSlot(
        name,
        ids.map((id) => this.nodes.get(id)).filter(Boolean)
      )
    })
  },
  /* ... */
}

function whenDefined(node, cb) {
  if (node instanceof RDOMElement) {
    return cb(node)
  }

  if (node instanceof HTMLElement) {
    if (node.tagName.startWith("RDOM-")) throw "not an rdom element"
    return customElements.whenDefined(node.name).then(() => cb(node))
  }
}

There are some ideas here too:
https://shoelace.style/getting-started/usage?id=waiting-for-components-to-load

When a component renders, it could also specify which custom elements it depends on, and it could be invisible until all elements have been loaded.

The benefit of doing this is caching. If different components have the same markup, it would become one custom element, and they would be cached... so any markup will only load once on the first load and then whenever you revisit a page the markup will be cached.