window.customElements is undefined in Chrome

Question

I wanted to develop with some webcomponents natively, even though the interoperability isn't great. So i enabled the experimental web platform features in google-chrome-stable version 50.0.2661.102 on my ubuntu OS under the tab chrome://flags ... but i still only have the deprecated(according to link to developer.mozilla docs ) method:

document.registerElement( {...})

And the same in Firefox. I know that if i installed polymer the polyfills would fix it, but as far as i have read the polymer api isn't 100% the same as the W3C standard. Have anyone managed to try out web components natively in the browser with the newest standard? its especially this part of the standard i would like to try out:

2.1.1 Creating an autonomous custom element

This section is non-normative.

For the purposes of illustrating how to create an autonomous custom element, let's define a custom element that encapsulates rendering a small icon for a country flag. Our goal is to be able to use it like so:

<flag-icon country="nl"></flag-icon>
To do this, we first declare a class for the custom element, extending HTMLElement:

class FlagIcon extends HTMLElement {
  constructor() {
    super();
    this._countryCode = null;
  }

  static get observedAttributes() { return ["country"]; }

  attributeChangedCallback(name, oldValue, newValue) {
    // name will always be "country" due to observedAttributes
    this._countryCode = newValue;
    this._updateRendering();
  }
  connectedCallback() {
    this._updateRendering();
  }

  get country() {
    return this._countryCode;
  }
  set country(v) {
    this.setAttribute("country", v);
  }

  _updateRendering() {
    // Left as an exercise for the reader. But, you'll probably want to
    // check this.ownerDocument.defaultView to see if we've been
    // inserted into a document with a browsing context, and avoid
    // doing any work if not.
  }
}
We then need to use this class to define the element:

customElements.define("flag-icon", FlagIcon);
At this point, our above code will work! The parser, whenever it sees the flag-icon tag, will construct a new instance of our FlagIcon class, and tell our code about its new country attribute, which we then use to set the element's internal state and update its rendering (when appropriate).

You can also create flag-icon elements using the DOM API:

const flagIcon = document.createElement("flag-icon")
flagIcon.country = "jp"
document.body.appendChild(flagIcon)
Finally, we can also use the custom element constructor itself. That is, the above code is equivalent to:

const flagIcon = new FlagIcon()
flagIcon.country = "jp"
document.body.appendChild(flagIcon)

I think i will try to install google-chrome-unstable on ubuntu aswell, that might have the API built in.

Thanks

UPDATE: Even Google Chrome 53.0.2785.30 dev (google-chrome-unstable on ubuntu) /w flags set, doesn't even have the standard implemented.

Answer 1

Update: The customElements is now implemented natively in Chrome v54!

Note: Custom Element is not a W3C standard yet. As of now, only the API form the old (aka v0) proposal is implemented in Chrome and Opera.

On version v53 you needed to run Chrnom under a flag (source: v1 under flag with Chrome and polyfill).

---

Running Example :

class Cev1 extends HTMLElement 
{
  constructor () 
  {
    super()
    console.log( "created this=", this )			
  }
  connectedCallback()
  {
    this.innerHTML = "Hello V1"
    console.log( "attached this=", this )
  }
} 
customElements.define( "test-v1", Cev1 )

<test-v1>Unknown</test-v1>