小编alb*_*rtR的帖子

我正在尝试修改使用 shadow root 创建的 web 组件的样式。

我看到样式被添加到head标签中，但它对shadow root封装没有影响。

我需要的是加载所有组件的样式并使它们在shadow root.

这是创建 Web 组件的一部分：

索引.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 // 常规反应组件 …