repl.it
@todojs/

07-slot-name

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
29
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Light DOM</title>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
<my-component>
  <span slot="name">Willian</span>
  <span slot="last-name">Shakespeare</span>
  <record-type>author</record-type>
</my-component>
<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      this.shadowRoot.innerHTML =
        '<p>' +
          '<slot name="last-name">My default text</slot>, ' +
          '<slot name="name">My default text</slot>' +
        '</p>';
    }
  }
  customElements.define('my-component', MyComponent);
</script>
</body>
</html>
result
console
?