How do I style ShadowDOM elements using external CSS in Firefox?
Question
I'm trying to build a custom HTML element. The problem is that I'm not able to apply styles to the Shadow DOM elements provided using external CSS. The code is working in Chrome but not in Firefox.
var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { console.log('Element creation started...'); var inputTextElement = document.createElement('input'); inputTextElement.type = 'text'; inputTextElement.className = 'simpleElem'; // Shadow DOM root var shadowRoot = this.createShadowRoot(); shadowRoot.appendChild(inputTextElement); console.log('Element creation ended...'); }; var SimpleElement = document.registerElement('simple-element', { prototype: proto });
simple-element { } simple-element::shadow .simpleElem { height: 30px; margin: 0px; padding: 0px; width: 180px; }
<!doctype html> <html> <head> <title>HTML5 | Custom Elements</title> <link type="text/css" rel="stylesheet" href="simple-elem.css"> <script type="text/javascript" src="simple-elem.js"></script> </head> <body> <simple-element></simple-element> </body> </html>
Not able to figure out what is wrong with Firefox.
3 answers
solution1
3 2014-08-18 15:12:32
Update: FF Shadow DOM support has arrived .
Firefox has no Shadow DOM support yet, see CanIUse.com . I recommend sticking to Chrome. EDIT: FF Nightly has some support , it can be enabled manually.
solution2
2 2014-08-18 16:21:15
As noted by Gábor Imre , Shadow DOM is not enabled by default in Firefox because it is still under development. You can, however, use a polyfill to get pretty good Shadow DOM behavior in all browsers that don't support it.. If you do, you'll then need to use polyfill-next-selector to obtain the behavior you want.
solution3
1 ACCPTED 2020-01-08 18:05:29
While Shadow DOM in general has been supported in Firefox for a while now (invalidating the two other answers), with Firefox 72 you can now target custom/Shadow DOM elements via the part attribute and ::part() pseudo-element, respectively:
//this JS boilerplate adapted from MDN let template = document.getElementById("simple-element"); globalThis.customElements.define(template.id, class extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content); } });
simple-element::part(shadow) { height: 30px; margin: 0; padding: 0; width: 180px; background: green; }
<template id="simple-element"> <div part="shadow">Hi</div> </template> <simple-element></simple-element>
Obviously this code looks a lot different from what your question code looks like because the Shadow DOM spec/implementations have changed quite a lot since 2014.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.