window.customElements在Chrome中未定义

Question

我希望本地开发一些web组件,即使互操作性不是很好.所以我在我的ubuntu操作系统上的chrome:// flags标签下启用了google-chrome-stable版本50.0.2661.102的实验性网络平台功能...但我仍然只有不推荐使用(根据developer.mozilla文档的链接)方法:

document.registerElement( {...})

在Firefox中也一样.我知道如果我安装了聚合物,那么polyfill会修复它,但据我所知,聚合物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.

谢谢

更新:即使谷歌Chrome 53.0.2785.30开发(ubuntu上的google-chrome-unstable)/ w标志设置,甚至没有实施标准.

Answer 1

更新:customElements现在已在Chrome v54中实现!

注意: Custom Element 尚未成为W3C标准.截至目前,只有旧的(又名 v0)提案的API 在Chrome和Opera中实现.

在版本v53上,您需要在标志下运行Chrnom(来源:带有Chrome和 polyfill的旗下的v1).

运行示例:

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>