Extending native button element

[grantkang5]

Is there a way to extend off other native elements in the browser other than HTMLElement? ie. HTMLButtonElement.
Seems like LitElement doesn't allow this if I wanted to do something like customElements.define('fancy-button', FancyButton, { extends: 'button' }.

I want to extend off native button features in the browser for accessibility/native styles.

[abraham]

You might find this discussion interesting.

[grantkang5]

@abraham Thanks! Looks like this isn't supported in lit unfortunately? It'd be great to have this implemented to avoid mixing in apis.

[e111077]

Safari is unlikely to ever implement the feature, and the team wants to minimize the amount of supported non-native features wherever possible.

[Totati]

There is some movement as @timbomckay noticed in the discussion linked above. I joined a project with Lit 3 weeks ago and I'm horrified how bad the a11y of our custom components are, and the hacks we use to solve some problems. Like good luck creating a custom button that submits the form that contains it. (I've managed to do it with attachInternals but that's fairly new api)

https://bugs.webkit.org/show_bug.cgi?id=182671 What about the polyfill they mention? We don't even care about Safari as our project runs on custom built machines locally with chrome, but we can't extend other elements than HTMLElement because of this limitation :D

[justinfagnani]

ElementInternals and form-associate elements should really help here. It's implemented in all browsers now, and I think it'd be better to try to polyfill that than a feature that still might never ship in Safari (and requires a re-work of LitElement and ReactiveElement to support).