Proof of concept / strategy decision: Extend or wrap built in elements.

[damontgomery]

Do we want to extend or wrap built in elements like a and button?

A wrapped element would look something like:

<outline-link>
  <a href="xyz">Hello world</a>
</outline-link>

An extended element:

<a is="outline-button" href="xyz">Hello world</a>

A brand new element:

<outline-link
  href="xyz"
>
Hello world
</outline-link>

Notes

Brand new elements

• Are not in the light DOM with all of those benefits / trade offs
• Don't behave like built in elements by default for better or worse
• We may need to recreate functionality like focusability / form interaction

Wrapped elements

• The content is in the light DOM with all of those benefits / trade offs
• Nested children are likely difficult to style

Extended built in elements

• Keep the behavior of built in elements by default
• Less likely to miss expected features like focusability / form interaction

Extended elements in Lit can be created by omitting the @customElement decorator and using the standard web component javascript like

customElements.define('outline-link', OutlineLink, { extends: 'a' });

References

Lit documentation on defining element.

https://lit.dev/docs/components/defining/

[damontgomery]

In September 2020, in the Lit Slack, someone states:

Extending built in elements is, unfortunately, not recommended.
TL;DR: Apple refuses to implement it
Would have solved so many problems, but instead the advice is to wrap instances of the needed element and pass properties

I could not get an extended component to work myself. :( It doesn't do anything.

https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy50cyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcbmltcG9ydCB7Y3VzdG9tRWxlbWVudCwgcHJvcGVydHl9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuLy8gQGN1c3RvbUVsZW1lbnQoJ3NpbXBsZS1ncmVldGluZycpXG5leHBvcnQgY2xhc3MgU2ltcGxlR3JlZXRpbmcgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIHN0eWxlcyA9IGNzc2BwIHsgY29sb3I6IGJsdWUgfWA7XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiBodG1sYDxzcGFuPlRoaXMgaXMgZnJvbSB0aGUgY29tcG9uZW50ITwvc3Bhbj5gO1xuICB9XG59XG5cbi8vIGN1c3RvbUVsZW1lbnRzLmRlZmluZSgnc2ltcGxlLWdyZWV0aW5nJywgU2ltcGxlR3JlZXRpbmcpO1xuY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdzaW1wbGUtZ3JlZXRpbmcnLCBTaW1wbGVHcmVldGluZywgeyBleHRlbmRzOiAncCcgfSk7XG4ifSx7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhRE9DVFlQRSBodG1sPlxuPGhlYWQ-XG4gIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vc2ltcGxlLWdyZWV0aW5nLmpzXCI-PC9zY3JpcHQ-XG48L2hlYWQ-XG48Ym9keT5cbiAgPGgyPkN1c3RvbSBDb21wb25lbnQ8L2gyPlxuICA8c2ltcGxlLWdyZWV0aW5nPlRoaXMgaXMgZnJvbSB0aGUgbGlnaHQgRE9NPC9zaW1wbGUtZ3JlZXRpbmc-XG4gIDxoMj5FeHRlbmRlZCBDb21wb25lbnQ8L2gyPlxuICA8cCBpcz1cInNpbXBsZS1ncmVldGluZ1wiPlRoaXMgaXMgZnJvbSB0aGUgbGlnaHQgRE9NPC9wPlxuPC9ib2R5PlxuIn1d

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  render() {
    return html`<span>This is from the component!</span>`;
  }
}

customElements.define('simple-greeting', SimpleGreeting, { extends: 'p' });

<h2>Extended Component</h2>
<p is="simple-greeting">This is from the light DOM</p>

[damontgomery]

Response today from Lit Slack:
You can do it with native custom elements (except for in Safari), but Lit is purposely structure NOT to support it, because Safari...

So, I don't think we can extend built in components with Lit.

[damontgomery]

Chris Snyder brought up the way REI is extending components.

While REI uses Vue and not web components (?), we thought maybe we can copy the pattern as an optional feature in Outline.

• Could be added to base class
• Could work for attributes. Properties too?
• Handling updates to attributes after creation?
• Potential accessibility benefits. Don't know what we don't know.

https://rei.github.io/rei-cedar-docs/components/links/
https://github.com/rei/rei-cedar/blob/next/src/components/link/CdrLink.jsx

To explain a broad use case, if we have a component that has attributes like href which we pass in to an a href attribute we create inside the component. Could we compare all the attributes on the component and pass them all into the component created in the component?

For updates, we could use a mutation observer like in Checkbox:

private _watchForLightDOMChanges(): void {
    const observer = new MutationObserver(() => {
      this._parseCheckboxes();
      this.requestUpdate();
    });
    observer.observe(this, {
      subtree: true,
      childList: true,
      attributes: true,
    });
  }

[damontgomery]

The Answer in Lit is that you wrap, because it doesn't support extending.

I think that pattern is worse, but I understand the decision with the lack of support in Safari.

I think we can consider this closed.