Javascript 对web组件中模板标记的引用_Javascript_Html_Web Component_Html5 Template

Javascript 对web组件中模板标记的引用

javascript html

Javascript 对web组件中模板标记的引用,javascript,html,web-component,html5-template,Javascript,Html,Web Component,Html5 Template,这是my index.html： <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="import" href="component.html"> </head> <body> <tag-name></tag-name>

这是my index.html：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="import" href="component.html">

</head>

<body>
    <tag-name></tag-name>
</body>

</html>

这是我的component.html

<template>
    <style></style>
    <div>test</div>
</template>
<script>
    customElements.define('tag-name', class extends HTMLElement {

        constructor() {
            super();
            /*var tmpl = document.querySelector('link[href$="component.html"]').import
                .querySelector('template').content.cloneNode(true);*/


            var currentScript = document.currentScript;
            var tmpl = currentScript.previousSibling.content.cloneNode(true);
            this.attachShadow({
                mode: 'open'
            }).appendChild(tmpl);
        }

    });

</script>


测试
定义（'tag-name'，类扩展HtmleElement{
构造函数（）{
超级（）；
/*var tmpl=document.querySelector（'link[href$=“component.html”]”）。导入
.querySelector（'template'）.content.cloneNode（true）*/
var currentScript=document.currentScript；
var tmpl=currentScript.previousSibling.content.cloneNode（true）；
这是阿塔奇沙多({
模式：“打开”
}).儿童（tmpl）；
}
});

我试图不使用“…querySelector（'link[href$=”component.html“]）。导入…”我已将其插入注释中。我想引用模板标记而不插入'component.html'。它不起作用，但我不明白为什么。

可能是我不知道的副本，谢谢。可能是我不知道的副本，谢谢。