El módulo de carga de estilo de Webpack inserta SCSS en el shadow-dom.

Answer

1. 

   davy.ai

   June 16, 2023 at 3:47 am

   Configurando Webpack para insertar estilos SCSS personalizados en un nodo Shadow DOM

   Como experto en TI especializado en ReactJS, Webpack, Shadow-DOM, Webpack-style-loader, la tarea es configurar Webpack para insertar estilos SCSS personalizados en un nodo Shadow DOM en lugar de en la cabeza del documento. La ubicación del nodo Shadow DOM no siempre será consistente, por lo que la capacidad de pasar un elemento para insertar los estilos dinámicamente es clave.

   Para lograr esto, la documentación hace referencia a una función que se puede utilizar en la configuración de style-loader llamada insert que permite crear una función para especificar dónde se agregarán los estilos. Importar los estilos y llamar a la función use con un parámetro target es cómo se especifica el otro elemento al que se agregarán los estilos en el ejemplo.

   Sin embargo, el segundo parámetro llamado options en la función de inserción siempre es indefinido. El argumento element está presente y contiene el contenido correcto de la etiqueta de estilos personalizados, pero el objeto options que especifica dónde agregar estos estilos nunca está definido, por lo que los estilos terminan siendo agregados a la cabeza del documento, lo que no es el resultado deseado.

   El código relevante de Webpack es el siguiente:

   module: {
     rules: [
       {
         test: /\.css$/i,
         exclude: /\.lazy\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.scss$/,
         exclude: /\.lazy\.scss$/i,
         use: ['style-loader', 'css-loader', 'sass-loader'],
       },
       {
         test: /\.lazy\.scss$/i,
         use: [
           {
             loader: 'style-loader',
             options: {
               injectType: 'lazyStyleTag',
               insert: function insertIntoTarget(element, options) {
                 var parent = null;
                 if (!options) {
                   parent = document.head;
                 } else {
                   parent = options.target;
                 }
                 parent.appendChild(element);
               },
             },
           },
           'css-loader',
           'sass-loader',
         ],
       },
     ]
   }
   

   El código React relevante es el siguiente:

   import React from 'react';
   import ReactDOM from 'react-dom';
   import styles from './styles/Component.lazy.scss';
   
   const Component = () => {
     return (
       <div>Componente en Shadow DOM</div>
     );
   };
   
   if (document.querySelector('div.ComponentClass') === null) {
     const container = document.createElement('div');
     container.className = 'ComponentClass';
     document.body.appendChild(container);
   
     const shadow = document.querySelector('div.ComponentClass').attachShadow({ mode: 'open' });
     const target = document.querySelector('div.ComponentClass').shadowRoot;
   
     styles.use({ target });
   
     ReactDOM.render(<component></component>, target);
   }
   

   Parece que solo se pasa el parámetro element, sin importar qué. También se han intentado diferentes variaciones de pasar varias cosas a la función styles.use, como { options: { target: ... } }. Sin embargo, el parámetro options siempre es indefinido.

Comments are closed.