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

【问题标题】：how to queryselector a template object from javascript如何从javascript查询选择器模板对象
【发布时间】：2019-08-07 20:09:02
【问题描述】：

基本上，我想从 javascript 中查询选择一个 <template>，但我一直为空。

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") 返回未定义。

如果它添加了一些有用的东西，如果我尝试将 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) 接受的答案基于文档.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 Imports 已过时，不应在新代码中使用。
另外，我刚刚注意到一些事情：document.querySelector("my-import-webcomponent-template") 正在尝试选择一个名为“my-import-webcomponent-template”的元素，如果您应该使用 document.querySelector("#my-import-webcomponent-template")您正在使用该 ID。
是的，我发现即使修复了它也无法正常工作。不幸的是，我不确定该方法应该如何工作，因为我只使用了当前版本的自定义元素。我的建议是看看如何使用自定义元素 v1，看看你是否可以在那里实现你想要的。这种方法对您没有多大用处，因为只有 Chrome 支持 HTML 导入，甚至他们将在版本 80 中将其删除（大约在 2020 年 2 月左右）。
事实上，如果您使用的是当前版本的 Chrome 并在加载页面时查看控制台，您应该会看到以下消息："[Deprecation] HTML Imports is deprecated and will将在 2020 年 2 月左右在 M80 中删除。请改用 ES 模块。有关详细信息，请参阅 chromestatus.com/features/5144752345317376 和 developers.google.com/web/updates/2019/07/…。"
如果您得到null，则该元素（尚未）在 DOM 中。首先通过使用 setTimeout 延迟 connectedCallback 中的代码来验证您的内容实际上是否在 DOM 中，然后向后查找问题的原因。在 JSFiddle、StackBlitz 或 CodePen 中使用 SO 中的可运行代码重现您的问题将帮助（并挑战）人们深入研究您的问题。 Github 不可运行.. 没有人（当然不是我）会从那里获取您的代码并使其工作

标签： javascript html web-component htmlelements native-web-component

【解决方案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">
...

【讨论】：

我从上面的 github 上读到“这个平台功能和 polyfill 已被弃用，请考虑使用 ES 模块。”您将如何通过 ES Modules JavaScript 文件“导入”到上面提到的 HTML 文件？请注意，我已经尝试过这样的建议但没有成功。作为“建议使用后编辑的***”下的提及者，我尝试过但没有成功“"
您不能使用 ES6 导入直接导入 HTML。您尝试的方法不起作用，因为您加载了 JS 文件，但从内部您永远不会加载 HTML 文件。您应该使用 fetch 来加载 HTML。