I am using web components and I have this code
codea.html
<!DOCTYPE html>
<html>
<head>
<title>My Component</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<!-- load your library web component -->
<link rel="import" href="codeb.html">
</head>
<body>
<!-- load by tag -->
<script>
const cls = customElements.get('dom-element');
var element = new cls();
document.body.appendChild(element);
</script>
</body>
</html>
codeb.html
<template id="x-foo-from-template">
</template>
<script>
customElements.define('dom-element', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
//const t = document.querySelector('#x-foo-from-template');
//const t = document.currentScript.ownerDocument.querySelector('#x-foo-from-template');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
});
</script>
Where I define t in the second script, the second t, works if I put <dom-element></dom-element> in the codea.html. But if I try to put it in with JavaScript code like what I have, both t attempts don't work. They get null.
Does anyone know how to fix this?
Thanks
