How to target a child of ::part atribute inside shadow DOM

user_1419775 0
Viewed 1024

I'm dealing with a new web component and the way the tags are defined has got my stuck on something.

The html looks like this:

    <!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>

I want to style the notation inside the black part differently than the notation inside the white part

This works for styling all notations

chess-board::part(notation) { background-color: #829982; }

This works for styling everything inside white part

chess-board::part(white) { background-color: #829982; }

But these do not work:

chess-board::part(white notation) { background-color: #829982; }
chess-board::part(white)::part(notation) { background-color: #829982; }

Anyone know if there is a syntax for targeting the part parent?

web-component css-selectors css
1 Answers

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>

EDIT:

From developers.google: styles defined in a shadow root are local

#shadow-root
  <style>
...

So try to find a way to insert above regular CSS syntax into shadow element . Find the line of code in your component files that creates shadow element and attach or edit styles tags.

Creating shadow DOM

user_71589590
Related