Shadow DOM v1 样式与 polyfill
Shadow DOM v1 styling with polyfill
我正在尝试仅使用 ShadowDOM v1(没有 Polymer 或其他 Web 组件),但我无法使用 polyfill 设置样式。
特殊的 :host
和 ::slotted
CSS 选择器不起作用。
我试过 various polyfills, but TBH, I'm a bit lost. I have seen ,但它使用的是自定义元素和模板。我的场景没有这些。
任何人都可以帮助我使这段代码在 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>
webcomponents-lite.js "v1" 现在嵌入阴影 DOM v1 polyfill:
请注意,要使用它,您必须将模板字符串放入 <template>
元素中,以便调用 ShadyCSS.prepareTemplate()
const makeTemplate = function (strings) {
const template = document.createElement('template');
template.innerHTML = strings[0];
return template;
}
const shadowHtml =
makeTemplate`<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>`
ShadyCSS.prepareTemplate(shadowHtml, 'div');
const root = document.querySelector('#root');
const shadow = root.attachShadow({ mode: 'open' });
shadow.innerHTML = shadowHtml.innerHTML;
<script src="https://cdn.rawgit.com/webcomponents/shadydom/master/shadydom.min.js"></script>
<script src="https://cdn.rawgit.com/webcomponents/shadycss/master/scoping-shim.min.js"></script>
<div id=root>
<div slot="content">
<p>I am blue</p>
</div>
</div>
我正在尝试仅使用 ShadowDOM v1(没有 Polymer 或其他 Web 组件),但我无法使用 polyfill 设置样式。
特殊的 :host
和 ::slotted
CSS 选择器不起作用。
我试过 various polyfills, but TBH, I'm a bit lost. I have seen
任何人都可以帮助我使这段代码在 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>
webcomponents-lite.js "v1" 现在嵌入阴影 DOM v1 polyfill:
请注意,要使用它,您必须将模板字符串放入 <template>
元素中,以便调用 ShadyCSS.prepareTemplate()
const makeTemplate = function (strings) {
const template = document.createElement('template');
template.innerHTML = strings[0];
return template;
}
const shadowHtml =
makeTemplate`<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>`
ShadyCSS.prepareTemplate(shadowHtml, 'div');
const root = document.querySelector('#root');
const shadow = root.attachShadow({ mode: 'open' });
shadow.innerHTML = shadowHtml.innerHTML;
<script src="https://cdn.rawgit.com/webcomponents/shadydom/master/shadydom.min.js"></script>
<script src="https://cdn.rawgit.com/webcomponents/shadycss/master/scoping-shim.min.js"></script>
<div id=root>
<div slot="content">
<p>I am blue</p>
</div>
</div>