我正在尝试使用ShadowDOM v1(没有聚合物或其他Web组件)但我无法使用样式与polyfill一起工作 .
特殊的 :host
和 ::slotted
CSS选择器不起作用 .
我试过various polyfills,但TBH,我有点迷失了 . 我见过this question,但它使用的是自定义元素和模板 . 我的情景是没有这些 .
任何人都可以帮助我使这个代码在Firefox或Edge中运行吗? - 具体来说,你应该看到三种颜色:蓝色,红色和黄色,但只有红色 .
const shadowHtml =
`<style>
:host {
background: yellow;
}
.inside {
background: red;
margin: 10px;
}
::slotted(div[slot="content"]) {
background: blue;
color: white;
}
</style>
<div>
<p>i am yellow</p>
<div class=inside>i am red</div>
<slot name="content"></slot>
</div>`;
const root = document.querySelector('#root');
const shadow = root.attachShadow({ mode: 'open' });
shadow.innerHTML = shadowHtml;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shadow DOM v1 Test</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/v1/webcomponents-lite.js"></script>
</head>
<body>
<div id=root>
<div slot="content">
<p>I am blue</p>
</div>
</div>
</body>
</html>
1 回答
webcomponents-lite.js "v1"现在嵌入一个Shadow DOM v1 polyfill:
ShadyDOM垫片提供了
attachShadow()
ShadyCSS对象模拟
:host
和::slotted()
.请注意,要使用它,您必须将模板字符串放在
<template>
元素中才能调用ShadyCSS.prepareTemplate()