如何从javascript查询选择模板对象

基本上，我想从javascript中查询选择一个，但我总是得到null

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);

my 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>

index.html

<my-import-webcomponent></my-import-webcomponent>
<link rel="import" href="./to-try/my-import-webcomponent.html" />

主要问题是document.querySelectormy-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);

如果不是因为两个原因，我的问题会完全一样：1他们似乎依赖于政策，而这不是我的情况；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>

什么都没变

***建议添加后编辑。没有任何变化

---

如果要加载HTML文件，则需要在加载之前加载库

<script src="https://raw.githubusercontent.com/webcomponents/html-imports/master/html-imports.min.js"></script>
<link rel="import" href="./to-try/my-import-webcomponent.html">
...

---

是过时的，不应该在新代码中使用。另外，我刚刚注意到：document.queryselector my-import-webcomponent-template正在尝试选择名为my-import-webcomponent-template的元素，如果使用ID，则应使用document.queryselector my-import-webcomponent-template。是的，我发现即使是固定的也不行。不幸的是，我不确定该方法应该如何工作，因为我只使用了自定义元素的当前版本。我的建议是看看如何使用定制元素v1，看看你是否能在那里实现你想要的。这种方法对你没有多大用处，因为只有Chrome支持HTML导入，甚至在2020年2月的某个时候，他们会在80版中删除它。事实上，如果你使用的是Chrome的当前版本，并在加载页面时查看控制台，你应该会看到以下消息：[不推荐]HTML导入已弃用，将在2020年2月左右的M80中删除。请改用ES模块。有关更多详细信息，请参阅和。如果获取null，则元素还不在DOM中。首先，通过使用setTimeout延迟connectedCallback中的代码，验证您的内容在某一时刻是否确实在DOM中，然后反向查找问题的原因。在JSFiddle、StackBlitz或CodePen中用可运行代码重现您的问题将有助于并挑战人们深入研究您的问题。Github无法运行。。没有一个好的不是我会从那里拿起你的代码，让它从上面的GITHUB读取这个平台特性，并且缩写填充，请考虑使用ES模块来代替。如何通过ES模块将JavaScript文件导入上述HTML文件？请注意，我已经尝试过这样的建议，但没有成功。作为***下的提及者，在建议使用而不是我尝试使用后，您无法使用ES6导入直接导入HTML。你所尝试的不会起作用，因为你加载了JS文件，但是从里面你永远不会加载HTML文件。您应该使用fetch来加载HTML。