Estoy creando algunos componentes web personalizados. Uno de los componentes es un conmutador de tema claro/oscuro. Sin embargo, esto depende de que se cargue una hoja de estilo específica.
Me gustaría generar una advertencia si no se ha cargado la hoja de estilo correcta.
Sin embargo, los usuarios tienen varias formas diferentes de cargar hojas de estilo (p. ej., etiqueta de enlace, instrucción @import, etc.) y, por lo tanto, no se garantiza que hayan cargado la hoja correcta.
La hoja de estilo que se necesita tiene algunas variables personalizadas bastante específicas y estilos con nombre. Entonces, me gustaría saber si hay alguna forma desde JavaScript (dentro de mi componente web), para verificar si una de esas variables o nombres de estilo existe en las hojas de estilo cargadas en la página actual .
Muchas gracias a RedRex por darme el puntero. Se puede acceder a las variables personalizadas, pero no desde document.style . Tienes que usar getComputedStyle .
Entonces, en mi clase de componente web, tengo una función de devolución de llamada connectedCallback que se ejecuta cada vez que se agrega una instancia del componente a la página.
connectedCallback() { // Is the correct stylesheet loaded? if ( !getComputedStyle(this).getPropertyValue('--uib-css').includes('uib-brand') ) console.warn('[uib-theme-changer] WARNING: It appears that you are not using uibuilder\'s uib-brand.css stylesheet. This component may not work as expected.') } // ---- end of connectedCallback ---- //En el archivo CSS, tengo
:root, :root.light { color-scheme: light dark; /* Create a checkable var - helps web components know if this stylesheet is loaded. * NOTE: no space between : and text! */ --uib-css:uib-brand; }Quizás valga la pena señalar que los componentes web están diseñados para limitar la interacción entre el CSS light-DOM y el CSS shadowDom. Sin embargo, las variables personalizadas están diseñadas para fluir en su componente.
Nota al pie: para los curiosos, estoy escribiendo algunos componentes web personalizados que funcionarán bien con Node-RED y node-red-contrib-uibuilder .