Un caso de uso para esto es crear un componente de alerta de página personalizado
<page-alert data-alertHeading='You are in danger' data-alertInfo ="This is a description of why you are in danger."> </page-alert>normalmente, el HTML con plantilla se agregaría donde se usó el código del componente en la página con:
this.attachShadow({mode: 'open' }); this.shadowRoot.appendChild(template.content.cloneNode(true));Sin embargo, me gustaría agregar este componente personalizado al cuerpo para que sea el primer elemento que sigue a la etiqueta del cuerpo de apertura y siempre aparecerá en la parte superior de la página. ¿Cómo puedo hacer para lograr eso?
Desde dentro de su componente:
document.body.insertBefore(this, document.body.firstChild); // or, for evergreen browsers, if you don't care about IE: document.body.prepend(this);Desde el exterior, si su elemento ya está en el DOM pero necesita ser movido:
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'));