Chromeでwindow.customElementsが定義されていません

Question

相互運用性はあまり良くないものの、ネイティブにいくつかのWebコンポーネントを使用して開発したかったのです。だから私はタブクローム：//フラグの下で私のubuntu OS上でgoogle-chrome-stableバージョン50.0.2661.102の実験的なウェブプラットフォームの機能を有効にしましたが、私はまだ（link to developer.mozilla docsに従って）推奨されません。

document.registerElement({...})

Firefoxでも同じです。私はポリマーを取り付けるとポリフェルがそれを修正することは知っていますが、ポリマーのAPIを読んだ限り、W3C標準と100％同じではありません。最新の標準でブラウザでネイティブにWebコンポーネントを試してみたことがありますか？その特に標準のこの部分は、私が試してみたいと思います：。

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) 

私は内蔵のAPIを持っている可能性があるUbuntuのaswell、上のグーグル・クロム不安定をインストールしようとすると思います

感謝

更新：Google Chrome 53.0.2785.30 dev（google-chrome-unstable on ubuntu）/ wフラグが設定されていても、標準が実装されていません。

Answer 1

更新：customElementsは現在、Chrome v54にネイティブで実装されています。

注：カスタム要素はではなく、ではまだW3C規格ではありません。現時点では、旧式の（aka v0）という申し立てのAPIのみがChromeとOperaで実装されています。

バージョンv53では、Chrnomをフラグ（ソース：v1 under flag with Chrome and polyfill）で実行する必要がありました。例実行

---

：「= `エイリアスカナリア：あなたは、Mac OSを使用している場合、その答えに加えて

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

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