How to extend default HTML elements as a "customized built-in element" using Web Components?

Question

I am looking to learn how to extend default HTML elements using the newer HTML5 Web Component spec. I have tried the examples outlined by Google here: https://developers.google.com/web/fundamentals/getting-started/primers/customelements

They are:

Anonymous function:

customElements.define('bigger-img', class extends Image {
  // Give img default size if users don't specify.
  constructor(width=50, height=50) {
    super(width * 10, height * 10);
  }
}, {extends: 'img'});

in HTML as:

<img is="bigger-img" width="15" height="20">

and

Named function:

// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
// for the list of other DOM interfaces.
class FancyButton extends HTMLButtonElement {
  constructor() {
    super(); // always call super() first in the ctor.
    this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY));
  }

  // Material design ripple animation.
  drawRipple(x, y) {
    let div = document.createElement('div');
    div.classList.add('ripple');
    this.appendChild(div);
    div.style.top = `${y - div.clientHeight/2}px`;
    div.style.left = `${x - div.clientWidth/2}px`;
    div.style.backgroundColor = 'currentColor';
    div.classList.add('run');
    div.addEventListener('transitionend', e => div.remove());
  }
}

customElements.define('fancy-button', FancyButton, {extends: 'button'});

in HTML as:

<button is="fancy-button" disabled>Fancy button!</button>

I can't get either of these examples to work in Chrome 55. What could be going on that creating customized built-in elements does not work? I have tried putting the JS and HTML in different order and swapping out HTMLImageElement for Image in example. Any help would be greatly appreciated!

Could there be something going on with the is="fancy-button" syntax? — beatsforthemind
– beatsforthemind, Commented Dec 9, 2016 at 22:20

Supersharp · Accepted Answer · 2018-04-10 20:16:39Z

3

It's because Customized Built-In Elements are not implemented yet in Chrome / Opera. Check status of the Chromium devs in this issue.

Only Autonomous Custom Elements are already implemented natively.

Menwhile you should use a a polyfill like WebReflection's one.

Update since Chrome 67

Now it works with versions of Chrome version 67 and above.

edited Apr 10, 2018 at 20:16

answered Dec 10, 2016 at 0:07

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to extend default HTML elements as a "customized built-in element" using Web Components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related