Question

这是我的index.html文件：

<!DOCTYPE html>
<html>
    <head>
        <script src="webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="test-component.html"> 
    </head>
    <body>


        <test-component id ="host">
            <p>test</p>
        </test-component>
    </body>
</html>

这是test-component.html文件：

<template id = "template">
    <p> this is the shadow dom</p>
    <content select = "p"></content>
</template>

<script>
    var test_component = document.registerElement("test-component", {
        prototype: Object.create(HTMLElement.prototype,{
            createdCallback:{
                value: function(){
                    var host = document.querySelector("#host");
                    var root = host.createShadowRoot();

                    var template = document.querySelector("#template");
                    var content = document.importNode(template.content, true);

                    root.appendChild(content);
                }
            }
        })
    });
</script>

出于某种原因，我在这一行收到错误：

var content = document.importNode(template.content, true);

错误是：

未捕获的TypeError：无法读取null
的属性'content'

任何人都知道为什么会这样吗？

Answer 1

<{1>}在test-component.html中尝试以此方式获取模板

var template = document.currentScript.ownerDocument.querySelector("#template");

Answer 2

我有同样的问题。我有一个占位符，充当Web组件的导航系统。由于Sigma的提示，显示的第一个组件（硬编写在html页面中）已正确加载，但我无法正确加载第二个组件（通过第一个组件中的事件创建）。 / p>

我是这样做的：

<template id="my-component-template">
    Hello World!
</template>
<script>
(function() {
    // Keep track of the document that contains the template
    let doc = document.currentScript.ownerDocument;
    window.customElements.define('my-component', class extends HTMLElement {
        constructor() {
            super();
            let shadowRoot = this.attachShadow({mode: 'open'});
            const t = doc.querySelector('#my-component-template');
            const instance = t.content.cloneNode(true);
            shadowRoot.appendChild(instance);
        }
    });
})();
</script>

Web组件模板错误

2 个答案: