我正在尝试在我的 Javascript 模块中使用 Shadow DOM，并将 CSS 模块/工作表导入到 Javascript 模块中：-
module.js
import sheet from '/styles.css' assert {type: 'css'};
export function message()
{
const myDiv = document.createElement("div");
const shadowRoot = myDiv.attachShadow({mode:"open"});
document.adoptedStyleSheets = [sheet];
myDiv.textContent = "This is Text";
return myDiv;
}
一旦我将行添加到 .attachShadow()，DIV“This is Text”的内容就停止出现。
如果我进一步尝试将StyleSheets采用到shadowRoot而不是文档中，那么styles.css中的CSS不会生效。
样式.css
host:: {
background-color: yellow;
}
div {
background-color: red;
}
我需要做什么才能在模块中使用 Shadow DOM 并与 CSS 模块中采用的样式配合使用？
test_mod.html
<!DOCTYPE html>
<html>
<style type="text/css">
div div {
height: 100px;
width: 100px;
text-align: center;
background-color: lightblue;
}
</style>
<script type="module">
import {message} from "http://localhost/message.js";
document.getElementById("demo").appendChild(message());
</script>
<body>
<h1>JavaScript Modules</h1>
<div id="demo"></div>
</body>
</html>
一旦我将行添加到 .attachShadow()，DIV“This is Text”的内容就停止出现。
因为你在 lightDOM 中设置了内容，当你 <slot> 时，它才会显示在
shadowDOM中。
如果我进一步尝试将StyleSheets采用到shadowRoot而不是文档中，那么styles.css中的CSS不会生效。
语法是
:hosthost::请阅读：
这里是一个几乎拥有所有 ShadowDOM 好东西的游乐场。
JSFiddle：https://jsfiddle.net/WebComponents/bj4n1L0r/
<h1>shadowDOM, loathed but loaded</h1>
<script>
function adoptSheet(atRoot, styles) {
let sheet = new CSSStyleSheet();
sheet.replaceSync(styles);
atRoot.adoptedStyleSheets.push(sheet);
}
// Global CSS
adoptSheet(document, "h1 { background: hotpink }" +
"div { background: pink }" +
"div::part(shadowH1) { background: lightgreen }");
const myDiv = document.createElement("div");
myDiv.setAttribute("border", "true");
const shadowRoot = myDiv.attachShadow({ mode: "open" });
adoptSheet(shadowRoot, ":host { background: red; padding: 5px }" +
":host([border]) { border:2px dashed green }" +
"h1 { color: green }" +
"::slotted(h1) { color: blue }");
myDiv.innerHTML = "<h1 >I am in lightDOM</h1>";
shadowRoot.innerHTML = "<h1 part='shadowH1'>I am in shadowDOM</h1>" +
"<slot>lightDOM will be slotted here</slot>";
document.body.append(myDiv);
</script>