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

Question

基本上，我想查询从 javascript 中选择一个 <template>，但我一直得到 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);

来自我的 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.querySelector("my-import-webcomponent-template") returns 未定义。

如果它添加了一些有用的东西，如果我尝试将 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) 他们似乎依赖 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>

完全没有变化

*** 编辑后建议加“#”。完全没有变化

Answer 1

如果您想使用 <link rel="import"> 加载 HTML 个文件，那么您需要先加载 HTML Imports 库。

<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">
...

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

how to queryselector a template object from javascript

html

javascript

web-component

htmlelements

native-web-component