Menu
I have this basic custom element example. It is working in Chrome, however not in Firefox. Is there a way to get it working in Firefox (without polymer but maybe some kind of polyfill)?
I also enabled the dom.webcomponents.enabled flag without any success.
Since this is solved, I created a repository, with the complete code: https://github.com/peplow/webcomponent-example/
Custom element html file:
<template id="template">
<button id="button">Hallo</button>
<style media="screen">
button{
color:red;
}
</style>
</template>
<script>
var localDoc = document.currentScript.ownerDocument;
class toggleButton extends HTMLElement{
constructor(){
super();
this.shadow = this.attachShadow({mode: 'open'});
var template = localDoc.querySelector('#template');
this.shadow.appendChild(template.content.cloneNode(true));
this.shadow.querySelector('button').onclick = function(){
alert("Hello World");
}
}
static get observedAttributes() {return ['name']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'name') {
this.shadow.querySelector('#button').innerHTML = newValue;
}
}
}
customElements.define('x-toggle', toggleButton);
</script>
File where it is used:
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="element.html">
<meta charset="utf-8">
</head>
<body>
<x-toggle name="Hello World"></x-toggle>
</body>
</html>
864
After some experimentation, it appears that the way to use the in-progress Web Components support in firefox is by navigating to about:config in firefox and enabling the dom. webcomponents. enabled flag. In Firefox 31 that seems to (at minimum) enable implementations of document.
The functionality of a custom element is defined using an ES2015 class which extends HTMLElement . Extending HTMLElement ensures the custom element inherits the entire DOM API and means any properties/methods that you add to the class become part of the element's DOM interface.
We can avoid them using libraries like Lit, Stencil, or Catalyst. The realization that all modern frontend frameworks and many big companies count on Web Components clearly shows that Web Components are not dead.
Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the is attribute (or property).
As of June 2018, Firefox support for Custom Elements can be enabled with the following steps
about:config.dom.webcomponents.shadowdom.enabled click to enable.dom.webcomponents.customelements.enabled click to enable.Hope this helps someone out there.
UPDATE: Now, since Firefox 63, Custom Elements are supported in Firefox by default.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
