如何在影子 DOM 中定位 ::part 属性的子项
Posted
技术标签:
【中文标题】如何在影子 DOM 中定位 ::part 属性的子项【英文标题】：How to target a child of ::part atribute inside shadow DOM 【发布时间】：2021-01-01 05:42:24 【问题描述】：我正在处理一个新的 Web 组件，而标签的定义方式让我陷入了困境。
html 看起来像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Chessboard Element Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.11.0/chess.min.js"></script>
<script type="module" src="https://unpkg.com/chessboard-element?module"></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script type="module">
const board = document.querySelector('chess-board');
const game = new Chess();
</script>
<style>
chess-board::part(white) background-color: white;
chess-board::part(black) background-color: orange;
/* does not work */
chess-board [part*="black"] color: blue
chess-board > [part="board"] > [part*="black"] > [part*="notation"] color: blue
</style>
</head>
<body>
<div class="flex items-center justify-center w-screen">
<chess-board position="start" draggable-pieces class="w-1/2" />
</div>
</body>
</html>我想将黑色部分内的符号样式设置为与白色部分内的符号不同
这适用于所有符号的样式
chess-board::part(notation) background-color: #829982;
这适用于为白色部分内的所有内容设置样式
chess-board::part(white) background-color: #829982;
但这些不起作用：
chess-board::part(white notation) background-color: #829982;
chess-board::part(white)::part(notation) background-color: #829982;
有谁知道是否有针对部分父级的语法？
【问题讨论】：
什么是正确的标签？此外，您的建议根本不起作用，没有效果。试过[part="notation"] background-color: #829982; 、web-component [part="notation"] background-color: #829982; 和*[part="notation"] background-color: #829982;
@vesperknight：请在您的问题中包含足够的代码，以便我们可以重现您的问题。
它是原生的.. 它是新的：developer.mozilla.org/en-US/docs/Web/CSS/::part
【参考方案1】：
chess-board>[part*="white"]>[part*="notation"]
background-color: red;
chess-board>[part*="black"]>[part*="notation"]
background-color: blue;
<chess-board>
<div part="square a4 white ">
<div part="notation numeric">white</div>
</div>
<div part="square h1 black">
<div part="notation alpha">black</div>
</div>
</chess-board>编辑：
来自developers.google: 影子根中定义的样式是本地的
#shadow-root
<style>
...
因此尝试找到一种方法将上述常规 CSS 语法插入到阴影元素中 .在组件文件中找到创建阴影元素并附加或编辑样式标签的代码行。
Creating shadow DOM
【讨论】：
我更新了问题以包含更多部分..你的答案对我不起作用，我认为这是因为它只有在每个 div 只有 1 个部分但实际上有多个部分时才有效，但只有白色/黑色和符号/alpha 很重要，其他部分应忽略 @vesperknight 这也不是问题，只需使用part*="white"。我更新了小提琴，看这里的解释：developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
感谢您的尝试.. 我会将您的答案标记为正确，因为我可以看到您的解决方案有效，但它不适用于我的用例.. 可能是因为这些部分是嵌套的在 #shadow-root 内？这是针对这个组件的：github.com/justinfagnani/chessboard-element 你的语法对它没有影响，但chess-board::part(white) background-color: #829982; 确实有效
我用一个完整的演示再次更新了我的问题
@vesperknight 但是您的演示中没有任何符号。你到底想达到什么目的？是的，我现在看到了，阴影部分的样式不同：meowni.ca/posts/part-theme-explainermeowni.ca/posts/shadow-dom以上是关于如何在影子 DOM 中定位 ::part 属性的子项的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Selenium Java 框架自动化 Shadow DOM
position: fixed 应该如何在影子 DOM 根中工作？