How to use extends option from WebComponents specification

[alexVasylenko]

Hi! I try to use lit-element in my current project and previous I use that code

class HomePageSearch extends HTMLInputElement {
 connectedCallback() {
   console.log("works");
   this.focus();
 }
}
customElements.define("homepage-search", HomePageSearch, {extends: "input"});

and then in html I can use that component like <input is="homepage-search" >. It's really important for me because in that case I can use that component without any css changes.

And now I want to convert the code to lit-element component. But I don't understand how because using that variant

import { LitElement } from "lit-element";
class HomePageSearch extends LitElement {
  connectedCallback() {
    console.log("works");
    this.focus();
  }
}
customElements.define("homepage-search", HomePageSearch, {extends: "input"});

I got the error TypeError: Class constructor bo cannot be invoked without 'new'

Thank you

Browsers Affected

• Chrome

Versions

• lit-element: v2.1
• webcomponents: v1

[justinfagnani]

We don't support this. Safari is not implementing customized built-ins, and we don't want to encourage components that don't work on Safari.

[rowanc1]

I am curious if the polyfill here: https://github.com/ungap/custom-elements-builtin could help?

Having lit-element lead the way towards these standards seems to me to be really helpful, especially when thinking of the ethos of the polymer-project (e.g. use the platform, and having the libraries disappear over time). The is="" syntax removes a huge amount of boilerplate (also in CSS for forwarding styles, etc.!) and makes for progressive enhancements. The thread on the W3C shows that a lot of users are trying to go this way: WICG/webcomponents#509

I hope that there are some polymer projects in the future that consider this and help lead Safari towards adopting these standards through creating libraries that help users take advantage of features that aren't fully adopted yet but are in the W3C recommendations.

It reminds me of the webgl debate a bit. Both Microsoft and apple were initially very against it (security and app store games), I think some of the chrome experiments and doom examples in firefox really helped turn the tide there! This seems small, perhaps by comparison to that feature, but the same idea!! :)

I see that there is also some discussion here: webcomponents/polyfills#102 (comment)

[alexVasylenko]

@rowanc1 Thank you, but I think, it couldn't help because of that polyfill should built-in in lit-element library.

[lukaskoeller]

Are there any updates on that? This is still very relevant and interesting I think

[alexVasylenko]

@lukaskoeller Now it's not a bug, it's official position from Safari team. They are strongly disagree with the 'extends' idea and the lit-element team can't skip supporting for Safari. So, I don't have any idea how you can implement it. (Without forking the lit-element).

The issue where you can find more information: https://bugs.webkit.org/show_bug.cgi?id=182671