[v1] consistent constructor

[WebReflection]

It seems like it's possible to class MyElement extends HTMLElement {} and then document.body.appendChild(new MyElement) after defining the element through customElements.define('my-element', MyElement).

However, if I try to do the same, using {extends: ...} or not, I cannot create new custom elements in the same way.

class MyAnchor extends HTMLAnchorElement {}
customElements.define('my-a', MyAnchor);
// or
customElements.define('my-a', MyAnchor, {extends: 'a'});

// will fail
document.body.appendChild(new MyAnchor);

I wonder if it's in the pipeline to monkey-patch all HTML constructors like it's done already only for few of them, or if the usage of new CustomElement instead of document.createElement('a', {is: 'my-a'}) will be discourage due polyfill limits (I personally wouldn't polyfill every DOM methods that might accept a generic node as one of its arguments).

Thanks for any sort of clarification.

[treshugart]

I think the issue you're experiencing is that extends hasn't been implemented yet: https://github.com/webcomponents/webcomponentsjs/blob/v1/src/CustomElements/v1/CustomElements.js#L143

Subclassing HTMLAnchorElement should still work, though: https://github.com/webcomponents/webcomponentsjs/blob/v1/src/CustomElements/v1/CustomElements.js#L477

I know there's currently still unresolved contention about is and extends as WebKit is pretty hard-fast about not implementing it, so I'm not sure what the polyfill will work to support. I assume it's on the roadmap as it's still in the custom element spec.

[WebReflection]

I've probably badly explained the issue. Beside extends and is definition variant, the following code will fail (and every other code that has not been patched like HTMLElement in here)

// create the class
class MyA extends HTMLAnchorElement {}

// define its name
customElements.define('my-a', MyA);

// and fail ...
document.body.appendChild(new MyA);

If I do the same with the patched HTMLElement the result is the expected one.

class MyElement extends HTMLElement {}
customElements.define('my-el', MyElement);
document.body.appendChild(new MyElement); // OK

Since I see that also document.createElement is patched, together with other methods, I wonder if the usage of new CustomElement will be discouraged in this polyfill or if in the future every native constructor will be patched like it's done already for the HTMLELement one.

[treshugart]

@WebReflection Ahh, ok, that makes perfect sense.

I just submitted a preliminary PR (#596) adding support for customised built-ins. It definitely needs more testing and some cleanup, but it's something that can hopefully get this started. I'm not sure the plans @justinfagnani has here, though. Would be good to get his thoughts, too.

[justinfagnani]

Extending other built-ins besides HTMLElement (even without is=) fails in Chrome's native implementation right now, because only HTMLElement has a callable constructor. I need to see what's happening there before moving on this...

[notwaldorf]

This issue was moved to webcomponents/custom-elements#49