Chrome에서 window.customElements가 정의되지 않았습니다.

Question

상호 운용성이 좋지 않아도 기본적으로 일부 웹 구성 요소를 사용하여 개발하고 싶습니다. 그래서 우분투 OS의 tab 크롬 : // flags 아래 google-chrome-stable 버전 50.0.2661.102에 실험용 웹 플랫폼 기능을 사용할 수있게되었지만 여전히 (link to developer.mozilla docs에 따라) 더 이상 지원되지 않습니다.

document.registerElement({...})

그리고 Firefox에서도 마찬가지입니다. 나는 폴리머를 설치하면 polyfills가 그것을 고칠 것이라고 알고 있지만, 내가 아는 한 폴리머 API는 W3C 표준과 100 % 동일하지 않다. 누구나 최신 표준으로 브라우저에서 웹 구성 요소를 기본적으로 시험해 볼 수 있습니까? 표준은 특히이 부분은 내가 시도하려는 :

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가 내장되어 있습니다 즉, 우분투 aswell에 구글 크롬 불안정한 설치하려고 생각

감사합니다.

업데이트 : Google 크롬 53.0.2785.30 dev (google-chrome-unstable on 우분투)/w 플래그가 설정되어 있어도 표준이 구현되지 않았습니다.

Answer 1

업데이트 : 이제 customElements은 Chrome v54에 기본적으로 구현됩니다.

참고 : 사용자 정의 요소는 이 아니며이 아직 W3C 표준이 아닙니다. 현재로서는 이전 버전의 (aka v0) 제안서 만 Chrome과 Opera에서 구현됩니다.

버전 v53에서는 Chrnom을 플래그 (소스 : v1 under flag with Chrome and polyfill)로 실행해야했습니다.

---

실행 예 :

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>

대답은 맥 OS를 사용하는 경우, 만들고 별칭 사용할 수 있습니다뿐만 아니라