如何在Shadow DOM内部定位到 ::part 属性的子元素

Question

如何在Shadow DOM内部定位到 ::part 属性的子元素

3

我正在处理一个新的 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; }

有人知道是否有一种语法可以针对父元素进行定位吗？

- vesperknight

什么是正确的标签？另外，您的建议根本不起作用，没有任何效果。已尝试 [part="notation"] { background-color: #829982; }、web-component [part="notation"] { background-color: #829982; } 和 *[part="notation"] { background-color: #829982; }。 - vesperknight

1

@vesperknight：请在你的问题中包含足够的代码，以便我们能够重现你的问题。 - David Thomas

这是本地的.. 这是新的: https://developer.mozilla.org/zh-CN/docs/Web/CSS/::part - vesperknight

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ikiK · Answer 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语法插入到阴影元素中的方法。在组件文件中找到创建阴影元素的代码行，并附加或编辑样式标签。

创建阴影DOM