Question

我正在使用网络组件，我有这个代码

codea.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Component</title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

        <!-- load your library web component -->
        <link rel="import" href="codeb.html">
    </head>
    <body>
        <!-- load by tag -->
        <script>
            const cls = customElements.get('dom-element');
            var element = new cls();
            document.body.appendChild(element);
        </script>
    </body>
</html>

codeb.html

<template id="x-foo-from-template">

</template>

<script>
    customElements.define('dom-element', class extends HTMLElement {
        constructor() {
            super();
            let shadowRoot = this.attachShadow({mode: 'open'});
            //const t = document.querySelector('#x-foo-from-template');
            //const t = document.currentScript.ownerDocument.querySelector('#x-foo-from-template');
            const instance = t.content.cloneNode(true);
            shadowRoot.appendChild(instance);
        }
    });
</script>

我在第二个脚本中定义t，第二个t，如果我将<dom-element></dom-element>放入codea.html，则有效。但是，如果我尝试使用我所拥有的JavaScript代码，那么t次尝试都不起作用。它们变为空。

有谁知道如何解决这个问题？

由于

如何引用Web组件中导入html文件中的标记元素？

0 个答案: