Html 如何在Firefox中使用外部CSS设置ShadowDOM元素的样式？

我正在尝试构建一个自定义HTML元素。问题是我无法将样式应用于使用外部CSS提供的阴影DOM元素。该代码在Chrome中运行，但在Firefox中不起作用

var proto=Object.create（HTMLElement.prototype）；
proto.createdCallback=函数（）{
log（'元素创建已开始…'）；
var inputExtElement=document.createElement（'input'）；
InputExtElement.type='text'；
inputTextElement.className='simpleElem'；
//阴影DOM根
var shadowRoot=this.createShadowRoot（）；
shadowRoot.appendChild（inputExtElement）；
log（'元素创建已结束…'）；
};
var SimpleElement=document.registerement（'simple-element'，{prototype:proto}）
简单元素{
}
简单元素：：shadow.simpleElem{
高度：30px；
边际：0px；
填充：0px；
宽度：180px；
}

HTML5 |自定义元素
更新：FF卷影DOM支持已停止。

Firefox还没有影子DOM支持，请参阅。我建议坚持使用Chrome。
编辑：FF夜间，可手动启用
 如所述，Firefox默认情况下不启用Shadow DOM，因为它仍在开发中。但是，您可以在所有不支持阴影DOM的浏览器中使用它来获得非常好的阴影DOM行为。。如果您这样做，那么您将需要使用来获得所需的行为。
虽然Firefox已经支持Shadow DOM一段时间了（使其他两个答案无效），但使用Firefox 72，您现在可以分别通过
part
属性和
：part（）
伪元素以自定义/阴影DOM元素为目标：


//此JS样板文件改编自MDN
让template=document.getElementById（“简单元素”）；
globalThis.customElements.define（template.id，类扩展HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:“open”}）；
this.shadowRoot.appendChild（template.content）；
}
});
simple元素：：部分（阴影）{
高度：30px；
保证金：0；
填充：0；
宽度：180px；
背景：绿色；
}

你好