Внедрить CSS стилей в тень root через Webpack - PullRequest
Новая
       47

Внедрить CSS стилей в тень root через Webpack

0 голосов
/ 12 марта 2020

Я пытаюсь изменить стили веб-компонента, созданного с помощью тени root.

Я вижу, что стили добавляются в тег head, но это не влияет на shadow root поскольку он инкапсулирован.

Мне нужно загрузить стили всех компонентов и сделать их отображаемыми внутри shadow root.

Это часть создания веб-компонента:

index.tsx 

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import './tmp/mockComponent.css'; // This is the styling i wish to inject


let container: HTMLElement;

class AssetsWebComponent extends HTMLElement {

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        const { shadowRoot } = this;
        container = document.createElement('div');
        shadowRoot.appendChild(container);
        ReactDOM.render(<App />, container);

    }
}

window.customElements.define('assets-component', AssetsWebComponent);

App.ts // Обычный компонент реакции 

import React from 'react';
import './App.css';
import { MockComponent } from './tmp/mockComponent'

export const App: React.FunctionComponent = (props) => {
    return (
        <MockComponent />
    );
};

webpack.config .ts 

// @ts-ignore
const path = require('path');
const common = require('./webpack.common.ts');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insert: function (element) {
                                const parent = document.querySelector('assets-component');

                                ***This what i want, to inject inside the shadowRoot but it 
                                never steps inside since the shadowRoot not created yet***

                                if (parent.shadowRoot) {
                                    parent.shadowRoot.appendChild(element);
                                }
                                parent.appendChild(element);
                            },
                        },
                    },
                    'css-loader',
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
        ],
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/template.html',
        }),
    ],

    devtool: 'inline-source-map',
});

Поскольку MockComponent может содержать больше компонентов, я полагаюсь на Webpack, чтобы внедрить все стили в shadow root. Я использую style-loader для вставки стилей, но он не работает должным образом.

Что я делаю неправильно или есть ли альтернатива для этого решения.

...