Javascript 使用多边形填充的阴影DOM v1样式

我尝试只使用ShadowDomV1（没有聚合物或其他web组件），但我无法使用polyfill进行样式设置

特殊的

：主机

和

：时隙

CSS选择器不工作

我试过了，但是我有点迷路了。我见过，但它使用自定义元素和模板。我的情况是没有这些

有人能帮我在Firefox或Edge中使用这些代码吗具体来说，您应该看到三种颜色：蓝色、红色和黄色，但只有红色起作用

constshadowhtml=
`
：主持人{
背景：黄色；
}
.里面{
背景：红色；
利润率：10px；
}
：：开槽（div[slot=“content”]）{
背景：蓝色；
颜色：白色；
}
我是黄色的

我是红色的
`;
const root=document.querySelector（'#root'）；
const shadow=root.attachShadow（{mode:'open'}）；
shadow.innerHTML=shadowHtml

阴影domv1测试
我是蓝色的

“v1”现在嵌入了阴影DOM v1 polyfill：


提供
附件阴影（）的垫片
模拟
：host
和
：：slotted（）
的对象

请注意，要使用它，您必须将模板字符串放入
元素中，以便调用
ShadyCSS.prepareTemplate（）


const makeTemplate=函数（字符串）{
const template=document.createElement（'template'）；
template.innerHTML=字符串[0]；
返回模板；
}
常量阴影HTML=
制作模板`
：主持人{
背景：黄色；
}
.里面{
背景：红色；
利润率：10px；
}
：：开槽（div[slot=“content”]）{
背景：蓝色；
颜色：白色；
}
我是黄色的

我是红色的
`
prepareTemplate（shadowHtml，'div'）；
const root=document.querySelector（'#root'）；
const shadow=root.attachShadow（{mode:'open'}）；
shadow.innerHTML=shadowHtml.innerHTML

我是蓝色的

非常感谢！顺便说一句，我包含的代码片段使用了来自的polyfill，它实际上在webcomponents-lite.js中包含了阴影DOM支持。它似乎也包含了ShadyCSS，而您的解决方案继续使用它。我假设ShadyDOM和ShadyCSS多边形填充当前更稳定。@PhilMander你说得对！我已经更正了我的答案。我正在创建一个自定义元素库，因此使用JS编写，因此必须使用JavaScript创建一个模板元素并将其放入DOM中，这样我才能使用ShadyDOM获取自定义元素的内容，这似乎是不切实际的。我只想使用模板字符串，我想让它与本机shadowdom一起工作，有点像shadydom，所以这个答案不适合我的情况。（或者我遗漏了什么？@trusktr模板不需要放到domoop中，你是对的。我想我根本不想创建一个模板元素。我只想做以下几点，所以我在他们的GitHub上询问了这是否可能（不清楚是否可能）：