Window.customElements undefined in Chrome

Question

I wanted to develop with some web components initially, although the interoperability is small. Therefore, I turned on the features of the experimental web platform in the google-chrome-stable version 50.0.2661.102 on my ubuntu OS under the chrome: // flags tab ... but I still just got deprecated (according to the link to developer.mozilla docs ) method:

document.registerElement( {...})

And the same thing in Firefox. I know that if I installed the polymer, the poly-shelves would fix it, but as far as I read, the api polymer is not 100% the same as the W3C standard. Has anyone been able to try web components initially in a browser with the latest standard? its especially this part of the standard i would like to try:

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 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 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)

, google-chrome-unstable ubuntu, , , API.

: Google Chrome 53.0.2785.30 dev (google-chrome-unstable on ubuntu)/w .

Answer 1

: customElements Chrome v54!

. W3C. Chrome Opera API- (aka v0).

v53 Chrnom (: v1 Chrome polyfill).

---

:

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>