我正在处理一个新的网络组件，标签的定义方式让我卡在了某些地方。
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; }
有人知道是否有针对父部分的语法吗？
最佳答案
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语法插入到shadow元素中 .在您的组件文件中找到创建阴影元素并附加或编辑样式标签的代码行。
关于css - 如何在 shadow DOM 中定位::part 属性的 child ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63885360/