嵌套元素（Web 组件）无法获取其模板

IT技术 javascript web-component shadow-dom html-imports html5-template
2021-01-14 17:39:20

我使用带有两个自定义元素 (v1) 的 Web 组件制作了一个简单示例，其中一个元素嵌套在另一个元素中。索引.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="import" href="app-container.html">
</head>
<body>
  <app-container></app-container>
</body>
</html>

应用程序容器.html：

<link rel="import" href="toolbar.html">
<template id="app-container">
  <app-toolbar></app-toolbar>
</template>
<script>
  customElements.define('app-container', class extends HTMLElement {
    constructor() {
      super();
      let shadowRoot = this.attachShadow({ mode: 'open' });
      const content = document.currentScript.ownerDocument.querySelector('#app-container').content;
      shadowRoot.appendChild(content.cloneNode(true));
    }
  });
</script>

工具栏.html：

<template id="app-toolbar">
  <p>Ok!</p>
</template>
<script>
  customElements.define('app-toolbar', class extends HTMLElement {
    constructor() {
      super();
      let shadowRoot = this.attachShadow({ mode: 'open' });
      const content = document.currentScript.ownerDocument.querySelector('#app-toolbar').content;
      shadowRoot.appendChild(content.cloneNode(true));
    }
  });
</script>

但是在 toolbar.htmldocument.currentScript中与在 app-container.html 中相同，因此querySelector('#app-toolbar')找不到带有 id 的模板app-toolbar。如何解决这个问题呢？

在 Chrome 55 上测试的示例（没有 polyfill）。

1个回答

document.currentScript包含对当前解析和执行的脚本的引用。因此，当constructor()调用该函数（从另一个脚本）时，它不再适用于您的目的 。

相反，您应该在脚本开头将其值保存在一个变量中，并在构造函数中使用该变量：

<script>
    var currentScript = document.currentScript
    customElements.define( ... )
    ...
</script>

如果您有多个脚本，则应使用不同的名称。

或者，您可以将临时值封装在一个闭包中：

(function(owner) {
    customElements.define('app-container', class extends HTMLElement {
        constructor() {
           super();
           let shadowRoot = this.attachShadow({ mode: 'open' });
           const content = owner.querySelector('#app-container').content;
           shadowRoot.appendChild(content.cloneNode(true));
        }
    });
})(document.currentScript.ownerDocument);

这里的值document.currentScript.ownerDocument被分配给owner调用时仍然正确定义的参数constructor()。

owner 是本地定义的，因此您可以在其他文档中使用相同的名称。

@Supersharp 你是我的英雄！
2021-03-22 17:39:20
其它你可能感兴趣的问题
上一篇如何在 JavaScript 中构建循环？ 下一篇在多个html页面之间共享一个变量