0
215
ViewsCómo aplicar estilo al elemento raíz de la sombra en angular
Estoy usando angular 12 y quiero aplicar algo de estilo al campo de entrada, que es un elemento raíz de sombra del elemento de campo de búsqueda de grupo .
Intenté usar ng-deep como se muestra a continuación, pero no funcionó.
:host ::ng-deep input { background: red !important; }
·
Juan Pablo Isaza
1 answers
Answer question0
Debido al aislamiento de estilos, que es una característica de Shadow DOM, no puede definir una regla CSS global que se aplicará en el alcance de Shadow DOM. En su caso, creo que background:red no se propaga para ser heredado por los elementos en la raíz de la sombra, por eso :host no funciona.
super(); const shadowRoot = this.attachShadow({ mode: 'open' }); const sheet = new CSSStyleSheet; sheet.replaceSync( `input { background: red !important; }`) shadowRoot.adoptedStyleSheets = [ sheet ];https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
·
Juan Pablo Isaza
Report
Answer question