如何在 Firefox 中使用外部 CSS 设置 ShadowDOM 元素的样式？
[英]How do I style ShadowDOM elements using external CSS in Firefox?
问题描述
I'm trying to build a custom HTML element.
我正在尝试构建自定义 HTML 元素。 The problem is that I'm not able to apply styles to the Shadow DOM elements provided using external CSS.问题是我无法将样式应用于使用外部 CSS 提供的 Shadow DOM 元素。 The code is working in Chrome but not in Firefox.该代码在 Chrome 中有效，但在 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.无法弄清楚 Firefox 出了什么问题。
3 个解决方案
解决方案1
3 2014-08-18 15:12:32
Update: FF Shadow DOM support has arrived .更新：FF Shadow DOM 支持已经到来。
Firefox has no Shadow DOM support yet, see CanIUse.com . Firefox 尚不支持 Shadow DOM，请参阅CanIUse.com 。 I recommend sticking to Chrome.我建议坚持使用 Chrome。 EDIT: FF Nightly has some support , it can be enabled manually.编辑：FF Nightly有一些支持，可以手动启用。
解决方案2
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.正如Gábor Imre所指出的，默认情况下，Firefox 中未启用 Shadow DOM，因为它仍在开发中。 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.但是，您可以使用polyfill在所有不支持它的浏览器中获得非常好的 Shadow DOM 行为。如果这样做，则需要使用polyfill-next-selector来获得所需的行为。
解决方案3
1 已采纳 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:虽然现在 Firefox 支持 Shadow DOM 已有一段时间了（使其他两个答案无效），但在 Firefox 72 中，您现在可以分别通过part属性和::part()伪元素定位自定义/Shadow DOM 元素：
//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.显然，这段代码看起来与您的问题代码有很大不同，因为自 2014 年以来 Shadow DOM 规范/实现发生了很大变化。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.