@todojs/

17.wc-attachElement

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Shadow DOM & HTMLELement</title>
</head>
<body>
<my-component></my-component>
<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      this.shadowRoot.innerHTML = '<h1>Custom Element with Shadow DOM</h1>';
    }
  }
  customElements.define('my-component', MyComponent);
</script>
</body>
</html>
result
console