Javascript 通用网络组件导入

我目前正在使用

纯HTML

和

VanillaJS

开发

网络组件。目标是为公司提供
组件的工作集合

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

但是如果我试图以编程方式创建它，我会出错，因为
document.currentScript.ownerDocument
是
document
而不是components文档

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

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

如何导入文档使其双向工作？
看看这个anwser：我觉得自己很笨，我在研究过程中没有发现这个问题。非常感谢！看看这个安瑟：我觉得自己很笨，我在研究中没有发现这个问题。非常感谢！
let alert = new IntranetAlert()
alert.setAttribute("type", "danger")
alert.setAttribute("message", "Component créé dynamiquement")

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