基本上，我想<template>从 javascript 中查询选择一个并且我一直为空。
JavaScript 文件：
class MyImportWebcomponent extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: "open" });
const template = document.querySelector("my-import-webcomponent-template");
const instance = template.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
}
customElements.define("my-import-webcomponent", MyImportWebcomponent);
来自我的 vanilla webcomponent 的模板对象
<template id="my-import-webcomponent-template">
<div id="mydiv" name="mydiv">
<p>Trying html importing another javascript file</p>
</div>
</template>
<script src="/to-try/my-import-webcomponent.js"></script>
索引.html
<my-import-webcomponent></my-import-webcomponent>
<link rel="import" href="./to-try/my-import-webcomponent.html" />
主要问题是 document.querySelector("my-import-webcomponent-template") 返回未定义。
如果它添加了一些有用的东西，如果我尝试将 javascript 和 html 保存在同一个文件中，而不是 querySelector 我直接创建元素，我可以成功地做到这一点。
全部在一个文件中
const templateString = `<div id="mydiv" name="mydiv"><p>Trying html plus javascript in same file</p></div>`;
const template = document.createElement("template");
template.innerHTML = templateString;
export class MyCompleteWebcomponent extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define("my-complete-webcomponent", MyCompleteWebcomponent);
如果不是出于两个原因，我的问题将与queryselector完全相同：（1）他们似乎依赖于 Polifys，这不是我的情况；（2）接受的答案基于 document.currentScript.ownerDocument 哪个据我所知，需要一个旧图书馆。
*** 建议使用后编辑，而不是
<!-- <link rel="import" href="./to-try/my-import-webcomponent.html" /> -->
<script type="module" src="./to-try/my-import-webcomponent.js"></script>
<my-import-webcomponent></my-import-webcomponent>
什么都没有改变
*** 建议添加“#”后编辑。完全没有变化
