@todojs/

07-slot-name

HTML, CSS, JS

No description

fork
loading
Files
  • index.html

This Plugin Crashed!

Error: Error: must not create an existing file {"type":"CREATE_FILE","wid":"0.9379097262002445","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5MaWdodCBET008L3RpdGxlPgogIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9Ad2ViY29tcG9uZW50cy93ZWJjb21wb25lbnRzanMvd2ViY29tcG9uZW50cy1sb2FkZXIuanMiPjwvc2NyaXB0Pgo8L2hlYWQ+Cjxib2R5Pgo8bXktY29tcG9uZW50PgogIDxzcGFuIHNsb3Q9Im5hbWUiPldpbGxpYW48L3NwYW4+CiAgPHNwYW4gc2xvdD0ibGFzdC1uYW1lIj5TaGFrZXNwZWFyZTwvc3Bhbj4KICA8cmVjb3JkLXR5cGU+YXV0aG9yPC9yZWNvcmQtdHlwZT4KPC9teS1jb21wb25lbnQ+CjxzY3JpcHQ+CiAgY2xhc3MgTXlDb21wb25lbnQgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgICBjb25zdHJ1Y3RvcigpIHsKICAgICAgc3VwZXIoKTsKICAgICAgdGhpcy5hdHRhY2hTaGFkb3coe21vZGU6ICdvcGVuJ30pOwogICAgICB0aGlzLnNoYWRvd1Jvb3QuaW5uZXJIVE1MID0KICAgICAgICAnPHA+JyArCiAgICAgICAgICAnPHNsb3QgbmFtZT0ibGFzdC1uYW1lIj5NeSBkZWZhdWx0IHRleHQ8L3Nsb3Q+LCAnICsKICAgICAgICAgICc8c2xvdCBuYW1lPSJuYW1lIj5NeSBkZWZhdWx0IHRleHQ8L3Nsb3Q+JyArCiAgICAgICAgJzwvcD4nOwogICAgfQogIH0KICBjdXN0b21FbGVtZW50cy5kZWZpbmUoJ215LWNvbXBvbmVudCcsIE15Q29tcG9uZW50KTsKPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPg=="},"asBuffer":null},"loaded":true}}
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