@todojs/

09.shadowRoot-styleSheets

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
28
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>.styleSheets</title>
</head>
<body>
<div id="test"></div>
<pre></pre>
<script>
  const div        = document.querySelector ('#test');
  const shadowRoot = div.attachShadow ({mode : 'closed'});
  const style      = document.createElement('style');
  style.innerHTML  =
    'h1 {' +
    '  color    : red;' +
    '  font-size: 2em;' +
    '}';
  shadowRoot.appendChild(style);
  const h1     = document.createElement('h1');
  h1.innerHTML = 'Header 1';
  shadowRoot.appendChild(h1);

  const result = document.querySelector('pre');
  result.innerHTML = shadowRoot.styleSheets.length + ' style sheet found';
</script>
</body>
</html>
result
console