自定义 Web 组件 - 如何将它附加到 <body> 的开头，而不管该组件在何处使用？

Question

一个用例是创建自定义页面警报组件

 <page-alert data-alertHeading='You are in danger' data-alertInfo ="This is a description of why you are in danger.">
 </page-alert>

通常，模板化的 HTML 将添加到页面中使用组件代码的地方：

    this.attachShadow({mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

不过，我想将此自定义组件附加到正文中，以便它成为开始正文标记之后的第一个元素，并且始终出现在页面顶部。我怎样才能做到这一点？

Answer 1

从您的组件内部：

document.body.insertBefore(this, document.body.firstChild);
// or, for evergreen browsers, if you don't care about IE:
document.body.prepend(this);

从外部看，如果您的元素已经在 DOM 但需要移动：

document.body.insertBefore(document.querySelector('page-alert'), document.body.firstChild);
// or, for evergreen browsers, if you don't care about IE:
document.body.prepend(document.querySelector('page-alert'));

自定义 Web 组件 - 如何将它附加到 <body> 的开头，而不管该组件在何处使用？

Custom Web Component - How can I append it to the beginning of the <body> regardless of where the component is used?

javascript

web-component

native-web-component