[scoped-elements] demos/docs code does not support extending elements

we have the following code in

page-a./indexjs

const html = createScopedHtml({
  'feature-a': FeatureA,
  'feature-b': FeatureB,
});

export class PageA extends HTMLElement {
  // ...
  connectedCallback() {
    render(html`
      <feature-a></feature-a>
      <feature-b></feature-b>
    `, this.shadowRoot);
  }
}

this is basically a side effect and registeres feature-a…

now it is not possible to extend without registering feature-a 🙈

ExtendedPage.js

import { PageA } from 'page-a'; // triggers side effect already
import { FeatureExtended } from '...';

const html = createScopedHtml({
  'feature-extended': FeatureExtended,
  'feature-b': FeatureB, // do I need this?
});

export class ExtendedPage extends PageA {
  // ...
  connectedCallback() {
    render(html`
      <feature-extended></feature-extended>
    `, this.shadowRoot);
  }
}

Strawman proposal Mixin

Ideally, you could use a static get

export class ExtendedPage extends ScopedElementsMixin(PageA) {
  static get scopedElements() {
    const parentEls = super.scopedElements;
    delete parentEls['feature-b'];
    return {
       ...parentEls, 
       'feature-extended': FeatureExtended,
    }
  }
}

Strawman proposal convention

alternatively, you could have a convention for how to get the scoped html

let html;
export class ExtendedPage extends PageA {
  constructor() {
    // ...
    this._registerSubElements();
  }

  _registerSubElements() {
    html = createScopedHtml({
      'feature-a': FeatureA,
      'feature-b': FeatureB,
    });
  }

[LarsDenBakker]

I’ve put together a demo of using a mixin, and hooking into lit-html rendering directly using a custom templateFactory which returns the scoped template. Basically it’s similar to how shadyRender does CSS scoping.

https://webcomponents.dev/edit/DQRqzOW9uMj0HUDLXysH

The great thing about this is that we don’t need to create our own html tag, we can apply the transformation to regular lit-html templates and we can scope templates per LitElement shadow root including sub templates. We could even apply this on an existing codebase without requiring code changes. Interesting possibilities 😃

Some caveats:

• This doesn’t work with shady render at the moment, we may need to replicate some code from shady render or ask lit-html for extra hooks.
• We are “misusing” the eventContext option to get a reference to the element. We need to think about the proper way to do this.
• Sub templates are processed, but because we cache on the template level it doesn’t scope the elements again when it’s used in a different scope. We would need to change our caching strategy.

[manolakis]

Fixed by https://github.com/open-wc/open-wc/commit/9868bc7a1bc94d4e54651c92d458f3b413a1ebda