Javascript Web组件模板错误_Javascript_Templates_Web_Components_Web Component

Javascript Web组件模板错误

javascript templates web

Javascript Web组件模板错误,javascript,templates,web,components,web-component,Javascript,Templates,Web,Components,Web Component,这是我的index.html文件： <!DOCTYPE html> <html> <head> <script src="webcomponentsjs/webcomponents.js"></script> <link rel="import" href="test-component.html"> </head> <body>

这是我的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>

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

错误是：

未捕获的TypeError:无法读取null的属性“content”

有人知道为什么会发生这种情况吗？

我知道你不能这样使用模板

首先，您可以将模板移动到index.html中，然后您的示例将正常工作：

<!--index.html-->
<!DOCTYPE html>
  <html>
    <head>
      <script src="webcomponentsjs/webcomponents.js"></script>
      <link rel="import" href="test-component.html"> 
    </head>
    <body>
      <template id = "template">
        <p> this is the shadow dom</p>
        <content select = "p"></content>
      </template>

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


这是影子dom
试验

现场样品来自：

另一个选项-不使用模板创建阴影dom：

<!--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-->
<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 paragraph = document.createElement("p");
          paragraph.innerHTML = "this is shadow dom";

          var content = document.importNode(paragraph, true);
          root.appendChild(content);
        }
      }
    });
  });
</script>


试验
var test_component=document.registerement（“测试组件”{
prototype:Object.create（HTMLElement.prototype{
createdCallback：{
值：函数（）{
var host=document.querySelector（“#host”）；
var root=host.createShadowRoot（）；
var段落=document.createElement（“p”）；
paragration.innerHTML=“这是影子dom”；
var content=document.importNode（段落，true）；
root.appendChild（内容）；
}
}
});
});

在

test component.html

中尝试以下方法获取模板

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

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

我是这样做的：

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


你好，世界！
（功能（）{
//跟踪包含模板的文档
让doc=document.currentScript.ownerDocument；
define（'my-component'，类扩展了HtmleElement{
构造函数（）{
超级（）；
让shadowRoot=this.attachShadow（{mode:'open'}）；
const t=doc.querySelector（“#我的组件模板”）；
const instance=t.content.cloneNode（true）；
appendChild（实例）；
}
});
})();

这也违背了使用html导入的目的，因此这不是一个解决方案。。如果我的所有模板都必须杂乱无章地塞进索引文件，为什么我要使用web组件？我也可以使用jQuery来克隆一个div，因为这样做…我的模板不起作用。html:73未捕获类型错误：无法读取null（…）的属性“ownerDocument”

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