mahuntington
/
framework
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

attribute on component

Browse Source
main
Matthew Huntington 11 months ago
parent eb7b786bdd
commit 501254cd4f
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File

13
component.js
Unescape View File

@ -1,17 +1,24 @@
class MyComponent extends HTMLElement { class Pet extends HTMLElement {
constructor() { constructor() {
super(); super();
const shadow = this.attachShadow({ mode: 'closed' }); const shadow = this.attachShadow({ mode: 'closed' });
const root = document.createElement('section'); const root = document.createElement('section');
const name = this.getAttribute('name')
root.innerHTML = ` root.innerHTML = `
<h2>Hello from MyComponent!</h2> <h2>Pet</h2>
<dl>
<dt>Name</dt>
<dd>${name}</dd>
</dl>
`; `;
shadow.appendChild(root) shadow.appendChild(root)
} }
} }
customElements.define('my-component', MyComponent); customElements.define('pet-component', Pet);

2
index.html
Unescape View File

@ -6,6 +6,6 @@
<script defer src="component.js"></script> <script defer src="component.js"></script>
</head> </head>
<body> <body>
<my-component></my-component> <pet-component name="fido"></pet-component>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save