admin管理员组文章数量:1026620
I wanted to develop with some webponents natively, even though the interoperability isn't great. So i enabled the experimental web platform features in google-chrome-stable version 50.0.2661.102 on my ubuntu OS under the tab chrome://flags ... but i still only have the deprecated(according to link to developer.mozilla docs ) method:
document.registerElement( {...})
And the same in Firefox. I know that if i installed polymer the polyfills would fix it, but as far as i have read the polymer api isn't 100% the same as the W3C standard. Have anyone managed to try out web ponents natively in the browser with the newest standard? its especially this part of the standard i would like to try out:
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)
I think i will try to install google-chrome-unstable on ubuntu aswell, that might have the API built in.
Thanks
UPDATE: Even Google Chrome 53.0.2785.30 dev (google-chrome-unstable on ubuntu) /w flags set, doesn't even have the standard implemented.
I wanted to develop with some webponents natively, even though the interoperability isn't great. So i enabled the experimental web platform features in google-chrome-stable version 50.0.2661.102 on my ubuntu OS under the tab chrome://flags ... but i still only have the deprecated(according to link to developer.mozilla docs ) method:
document.registerElement( {...})
And the same in Firefox. I know that if i installed polymer the polyfills would fix it, but as far as i have read the polymer api isn't 100% the same as the W3C standard. Have anyone managed to try out web ponents natively in the browser with the newest standard? its especially this part of the standard i would like to try out:
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)
I think i will try to install google-chrome-unstable on ubuntu aswell, that might have the API built in.
Thanks
UPDATE: Even Google Chrome 53.0.2785.30 dev (google-chrome-unstable on ubuntu) /w flags set, doesn't even have the standard implemented.
Share Improve this question edited Dec 9, 2016 at 8:40 Supersharp 31.3k11 gold badges102 silver badges147 bronze badges asked Jul 27, 2016 at 18:20 DenLilleMandDenLilleMand 4,5805 gold badges30 silver badges40 bronze badges1 Answer
Reset to default 6Update: The customElements is now implemented natively in Chrome v54!
Note: Custom Element is not a W3C standard yet. As of now, only the API form the old (aka v0) proposal is implemented in Chrome and Opera.
On version v53 you needed to run Chrnom under a flag (source: v1 under flag with Chrome and polyfill).
Running Example :
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>I wanted to develop with some webponents natively, even though the interoperability isn't great. So i enabled the experimental web platform features in google-chrome-stable version 50.0.2661.102 on my ubuntu OS under the tab chrome://flags ... but i still only have the deprecated(according to link to developer.mozilla docs ) method:
document.registerElement( {...})
And the same in Firefox. I know that if i installed polymer the polyfills would fix it, but as far as i have read the polymer api isn't 100% the same as the W3C standard. Have anyone managed to try out web ponents natively in the browser with the newest standard? its especially this part of the standard i would like to try out:
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)
I think i will try to install google-chrome-unstable on ubuntu aswell, that might have the API built in.
Thanks
UPDATE: Even Google Chrome 53.0.2785.30 dev (google-chrome-unstable on ubuntu) /w flags set, doesn't even have the standard implemented.
I wanted to develop with some webponents natively, even though the interoperability isn't great. So i enabled the experimental web platform features in google-chrome-stable version 50.0.2661.102 on my ubuntu OS under the tab chrome://flags ... but i still only have the deprecated(according to link to developer.mozilla docs ) method:
document.registerElement( {...})
And the same in Firefox. I know that if i installed polymer the polyfills would fix it, but as far as i have read the polymer api isn't 100% the same as the W3C standard. Have anyone managed to try out web ponents natively in the browser with the newest standard? its especially this part of the standard i would like to try out:
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)
I think i will try to install google-chrome-unstable on ubuntu aswell, that might have the API built in.
Thanks
UPDATE: Even Google Chrome 53.0.2785.30 dev (google-chrome-unstable on ubuntu) /w flags set, doesn't even have the standard implemented.
Share Improve this question edited Dec 9, 2016 at 8:40 Supersharp 31.3k11 gold badges102 silver badges147 bronze badges asked Jul 27, 2016 at 18:20 DenLilleMandDenLilleMand 4,5805 gold badges30 silver badges40 bronze badges1 Answer
Reset to default 6Update: The customElements is now implemented natively in Chrome v54!
Note: Custom Element is not a W3C standard yet. As of now, only the API form the old (aka v0) proposal is implemented in Chrome and Opera.
On version v53 you needed to run Chrnom under a flag (source: v1 under flag with Chrome and polyfill).
Running Example :
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>本文标签： javascriptwindowcustomElements is undefined in ChromeStack Overflow
版权声明：本文标题：javascript - window.customElements is undefined in Chrome - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745649802a2161246.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论