利用字符串形式的CSS样式在React组件中

import React, { useEffect, useId, useState } from 'react';
// 假设有一个CSS解析和前缀化工具函数
// import { parseAndPrefixCss } from './utils/cssProcessor'; 

function DynamicStyledComponent({ cssString, children }) {
  const componentId = useId(); // 生成一个唯一的ID，例如 ":r0:"
  const [scopedCss, setScopedCss] = useState('');

  useEffect(() => {
    if (cssString) {
      // 这是一个概念性函数，实际需要引入CSS解析库并实现
      // 例如：const processedCss = parseAndPrefixCss(cssString, `[data-id="${componentId}"]`);
      // 为了演示，我们手动模拟一个简单的前缀化
      const prefixedCss = cssString.replace(/(\.[a-zA-Z0-9_-]+)/g, `[data-id="${componentId}"] $1`);
      setScopedCss(prefixedCss);
    }
  }, [cssString, componentId]);

  // 使用useEffect将样式注入到head
  useEffect(() => {
    if (scopedCss) {
      const styleTag = document.createElement('style');
      styleTag.setAttribute('data-scope-id', componentId);
      styleTag.textContent = scopedCss;
      document.head.appendChild(styleTag);

      return () => {
        // 组件卸载时移除样式
        document.head.removeChild(styleTag);
      };
    }
  }, [scopedCss, componentId]);

  return (
    <div data-id={componentId}>
      {children}
    </div>
  );
}

// 使用示例
const myCss = `.some-class { color: red; } .another-class { font-size: 16px; }`;

function App() {
  return (
    <div>
      <h1>My App</h1>
      <DynamicStyledComponent cssString={myCss}>
        <p className="some-class">This text should be red.</p>
        <span className="another-class">This text should be 16px.</span>
      </DynamicStyledComponent>
      <p className="some-class">This text should NOT be red (unaffected by scoped style).</p>
    </div>
  );
}

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom/client'; // 使用React 18的createRoot

function ShadowDomHost({ cssString, children }) {
  const hostRef = useRef(null);
  const shadowRootRef = useRef(null);
  const reactRootRef = useRef(null); // 用于存储React Root

  useEffect(() => {
    if (hostRef.current && !shadowRootRef.current) {
      // 附加Shadow DOM
      const shadowRoot = hostRef.current.attachShadow({ mode: 'open' });
      shadowRootRef.current = shadowRoot;

      // 创建一个容器用于React渲染
      const reactContainer = document.createElement('div');
      shadowRoot.appendChild(reactContainer);

      // 创建React Root并渲染子组件
      const root = ReactDOM.createRoot(reactContainer);
      reactRootRef.current = root;
      root.render(children);

      // 插入样式
      if (cssString) {
        const styleTag = document.createElement('style');
        styleTag.textContent = cssString;
        shadowRoot.prepend(styleTag); // 将样式插入到内容之前
      }
    } else if (reactRootRef.current) {
      // 如果Shadow DOM已存在，仅更新React内容
      reactRootRef.current.render(children);
    }
  }, [children, cssString]);

  // 组件卸载时清理
  useEffect(() => {
    return () => {
      if (reactRootRef.current) {
        reactRootRef.current.unmount();
        reactRootRef.current = null;
      }
      shadowRootRef.current = null;
    };
  }, []);

  return <div ref={hostRef} />;
}

// 使用示例
const myShadowCss = `.shadow-class { background-color: lightblue; padding: 20px; } p { color: darkgreen; }`;

function AppWithShadow() {
  return (
    <div>
      <h2>Content Outside Shadow DOM</h2>
      <p className="shadow-class">This paragraph is outside and should not be styled by shadow CSS.</p>

      <ShadowDomHost cssString={myShadowCss}>
        <div className="shadow-class">
          <h3>Content Inside Shadow DOM</h3>
          <p>This paragraph is inside and should be dark green.</p>
          <span style={{ color: 'red' }}>Inline styles still work.</span>
        </div>
      </ShadowDomHost>

      <h2>More Content Outside Shadow DOM</h2>
    </div>
  );
}

import React, { useRef, useEffect } from 'react';

function IframeRenderer({ htmlContent, cssString }) {
  const iframeRef = useRef(null);

  useEffect(() => {
    if (iframeRef.current) {
      const iframe = iframeRef.current;
      const doc = iframe.contentDocument || iframe.contentWindow.document;

      // 清空旧内容
      doc.open();
      doc.write(''); // 清空iframe
      doc.close();

      // 写入新的HTML和CSS
      doc.open();
      doc.write(`
        <!DOCTYPE html>
        <html>
        <head>
          <style>${cssString}</style>
        </head>
        <body>
          ${htmlContent}
        </body>
        </html>
      `);
      doc.close();
    }
  }, [htmlContent, cssString]);

  return (
    <iframe
      ref={iframeRef}
      style={{ width: '100%', height: '300px', border: '1px solid #ccc' }}
      title="Dynamic Content"
    />
  );
}

// 使用示例
const dynamicHtml = `
  <div class="container">
    <h1>Hello from Iframe!</h1>
    <p class="text-style">This text is styled by iframe's CSS.</p>
    <button>Click me</button>
  </div>
`;

const iframeCss = `
  .container {
    font-family: Arial, sans-serif;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 8px;
  }
  .text-style {
    color: #333;
    font-size: 18px;
    margin-bottom: 10px;
  }
  button {
    background-color: #007bff;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
`;

function AppWithIframe() {
  return (
    <div>
      <h2>Content Outside Iframe</h2>
      <p style={{ color: 'blue' }}>This text is blue and outside the iframe.</p>

      <IframeRenderer htmlContent={dynamicHtml} cssString={iframeCss} />

      <h2>More Content Outside Iframe</h2>
    </div>
  );
}