Universal WebComponents导入

Question

我目前正在使用WebComponent和plain HTML处理VanillaJS。目标是为公司提供Components的工作集合。

<template id="x-intranet-alert">
    <div class="alert">
        <p></p>
    </div>
</template>

<script>
    class IntranetAlert extends HTMLElement {
        static get observedAttributes() {
            return ['message', 'type', 'close']
        }

        constructor() {
            super()

            this.innerHTML = document.currentScript.ownerDocument.querySelector('#x-intranet-alert').innerHTML
        }

        attributeChangedCallback(attr, oldValue, newValue) {
            switch(attr) {
                case 'type':
                    this.querySelector("div").className = `alert ${newValue}`
                    break

                // ...
            }
        }
    }

    customElements.define('intranet-alert', IntranetAlert);
</script>

如果我在HTML

中执行此操作，则此功能正常

<intranet-alert type="info" message="Je suis une alert de type info" close="true"></intranet-alert>

但是，如果我尝试以编程方式创建它，则会出现错误，因为document.currentScript.ownerDocument是document而不是组件文档。

let alert = new IntranetAlert()
alert.setAttribute("type", "danger")
alert.setAttribute("message", "Component créé dynamiquement")

document.querySelector("#alert").appendChild(alert)

如何导入文档以便它可以双向工作？