@todojs/

16.css-parts

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS and Shadow DOM (::part)</title>
  <style>
    div#test::part(button-yes) {
      color: red;
      background-color: yellow;
    }
    div#test::part(button-no) {
      color: yellow;
      background-color: red;
    }
  </style>
</head>
<body>
<div id="test" class="alert"></div>
<script>
  const div = document.querySelector ('#test');
  div.attachShadow ({mode : 'open'});
  div.shadowRoot.innerHTML =
    '<button part="button-yes">Yes</button> ' +
    '<button part="button-no">No</button>';
</script>
</body>
</html>
result
console