0
183
VisualizaçõesComponente web que hereda estilos principales incluso con todos: conjunto inicial
MVCE
Puede ejecutar este fragmento de código:
const a = document.createElement("div"); // display big red rectangle in top left a.style.position = "absolute"; a.style.left = "10px"; a.style.top = "10px"; a.style.background = "red"; a.style.color = "green"; a.style.fontSize = "large"; document.body.appendChild(a); // attach shadow root a.attachShadow({mode: 'closed'}).innerHTML = ` <style> :host { all: initial; display: block; } </style> <p> A paragraph element which should not inherit any styles from its parent webpage (outside the shadow DOM). </p>`;Descripción
He copiado la sección raíz de la sombra palabra por palabra de lamplightdev , pero también se proporciona el mismo código en varios subprocesos de desbordamiento de pila. Debido a este código, se supone que el elemento <p> NO debe heredar ningún estilo de su cuerpo principal.
Problema
Puede ejecutar el fragmento de código para ver que el elemento de párrafo aparece en verde con un tamaño de fuente grande, lo cual es inesperado porque configuré :host { all: initial; } .
En DevTools también puedo ver que el elemento de párrafo muestra reglas de estilo que se "heredan de div", que está fuera de mi componente web.
Pregunta
Quiero que mi componente web no herede los estilos de la página principal, pero ¿por qué lo hace?
2 Respostas
Responde à pergunta0
Puedes usar :host .
Pero como tiene una Especificidad más baja, ¡tienes que forzarlo con !important
:host { all: initial !important; }Directamente del ingeniero principal de componentes web de Apple:
const a = document.createElement("div"); a.style.background = "red"; a.style.fontSize = "large"; a.style.color = "green"; document .body .appendChild(a) .attachShadow({mode: 'open'}) .innerHTML = `<style> :host { all: initial !important } </style> Content which should not inherit any styles`;Notas:
- shadowRoot
openoclosedno tiene nada que ver con CSS;
solo useclosedcuando comprenda al 100% lo que está haciendo.
0
Usar :host selector es una forma incorrecta de detener la herencia . Básicamente, lo que está diciendo es restablecer mi estilo CSS para el elemento div y luego aplicar la position , background , color y el tamaño de fontSize a mi div . Dado que color se hereda de forma predeterminada, se aplica a la etiqueta <p> dentro de shadowDOM . Imagínese: primero se aplica la herencia al div del host y luego se anula el div del elemento del host con las propiedades especificadas.
La solución correcta es no usar :host selector y en su lugar aplicar directamente los estilos a la etiqueta <p> como:
<style> p { all: initial; display: block; } </style>