window.customElements 在 Chrome 中未定义

Question

我想在本地使用一些 webcomponents 进行开发，尽管互操作性不是很好。所以我在 google-chrome-stable 版本 50.0.2661.102 中启用了 ubuntu OS 选项卡下的实验性网络平台功能 chrome://flags ...但我仍然只有已弃用的（根据 link to developer.mozilla docs ）方法：

document.registerElement( {...})

在 Firefox 中也是如此。我知道如果我安装了 polymer，polyfills 会修复它，但据我所知，polymer 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)

我想我会尝试在 ubuntu 上安装 google-chrome-unstable，它可能内置了 API。

谢谢

更新：甚至 Google Chrome 53.0.2785.30 dev（google-chrome-在 ubuntu 上不稳定）/w 标志设置，不'甚至没有实施标准。

Answer 1

更新：customElements 现在在 Chrome v54 中本地实现！

注意：自定义元素还不是 W3C 标准。截至目前，只有 API 形式的 old (aka v0) 提案在 Chrome 和 Opera 中实现。

在版本 v53 上，您需要运行标记下的 Chrnom（来源：v1 under flag with Chrome and 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>

window.customElements 在 Chrome 中未定义

window.customElements is undefined in Chrome

javascript

google-chrome

cross-browser

web-component

custom-element