Re: [w3c/webcomponents] Lazy Custom Element Definitions (#782)

@robwormald one other way to implement lazy definitions without having to know the observed attributes up-front is to use a mutation observer.

Something like this:

```js
// caution: completely, absolutely, untested and never-run code
const lazyDefinitions = new Map();
const lazyDefinitionObserver = new MutationObserver((records) => {
  for (const record of records) {
    for (const node of record.addedNodes) {
      const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
      while (walker.nextNode() !== null) {
        tagName = walker.currentNode.tagName;
        const lazyDefinition = lazyDefinitions.get(tagName);
        if (lazyDefinition !== undefined) {
          lazyDefinitions.delete(tagName);
          (async () => {
            customElements.define(tagName, await lazyDefinition());
          })();
        }
      }
    }
  }
});
lazyDefinitionObserver.observe(document);
const originalAttachShadow = HTMLElement.prototype.attachShadow;
HTMLElement.prototype.attachShadow = function(options) {
  const shadow = originalAttachShadow.call(this, options);
  lazyDefinitionObserver.observe(shadow);
  return shadow;
};
customElements.polyfillLazyDefine = (tagName, loader) => {
  lazyDefinitions.set(tagName, loader);
};
```

cc @bicknellr who's been looking into polyfilling this

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/782#issuecomment-505682596