0
172
Views¿Cómo garantizar que los estilos de clase CSS se representen en elementos HTML personalizados?
Nuevo en el uso de elementos HTML personalizados. Mi estilo de clase no se aplica al renderizado de la página, aunque se muestra en el DOM. La única pista es que aparece en el inspector dentro del Shadow DOM abierto en lugar del DOM normal, lo que parece indeseable si causa problemas de CSS.
Tenga en cuenta que el estilo de clase en cuestión en este ejemplo se llama 'border-todo'. He probado tres navegadores modernos. No se muestra el borde
índice.html
<!DOCTYPE html> <html lang="en"> <head> <title>My Test</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="styles.css" > <script src="header.js"></script> </head> <body> <header-component></header-component> </body> </html>encabezado.js
class Header extends HTMLElement { constructor() { super(); const template = document.createElement('template'); const h1 = document.createElement('h1') h1.innerHTML = 'Hello World' h1.style.color = 'green' h1.className = 'border-all' template.content.appendChild(h1) const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.appendChild(template.content); } } customElements.define('header-component', Header); 
2 answers
Answer question0
https://developers.google.com/web/fundamentals/web-components/shadowdom
ShadowDOM está diseñado por:
<style>dentro de shadowDOMEstilos hereditarios
https://lamplightdev.com/blog/2019/03/26/por-que-mi-componente-web-hereda-estilos/(en cascada) propiedades CSS
shadowParts (y temas)
https://meowni.ca/posts/part-theme-explainer/<slot>se reflejan , NO están diseñados por shadowDOM, sino por su contenedor.
Ver: ::contenido ranurado(febrero de 2022) Construible StyleSheets sigue siendo una parte exclusiva de Chromium
https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet
customElements.define("my-component",class extends HTMLElement{ constructor(){ super().attachShadow({mode:"open"}) .innerHTML = ` <style> :host { display:inline-block; padding-left:2em } h2 { margin:0 } span { color: var(--spancolor,grey); </style> <h2 part="wcTitle">Hello Web Component!</h2> <span>styling shadowDOM can be a challenge</span> <slot></slot>`; } }) <style> body { font:18px Arial; /* inheritable styles style Web Components */ color:green; /* color is an inheritable style */ --spancolor: lightcoral; /* css properties cascade, and are available in Web Components */ } div ::part(wcTitle){ /* ::parts style ALL (nested) elements in shadowDOM */ background:gold; } my-component{ font-weight: bold; /* slotted content is styled by the container */ } my-component my-component{ color:blue; } </style> <my-component>But is very powerfull!</my-component> <div> <my-component>You should never give up! <my-component>Those who quit after the first attempt are loosers</my-component> </my-component> </div>0
Una forma de hacerlo es usar la propiedad Element.classList
Tu puedes sólo:
document.querySelector('h1').classList.add('border-all'); Les dejaré a continuación un ejemplo de trabajo en CodePen, la única diferencia es que el elemento ya tiene una identificación y usamos document.getElementById en lugar de document.querySelector
Pero esa es más o menos la diferencia, ¡espero que esto te ayude a entender mejor!