export function App() { return 这儿是隔离的 }

ReactDOM.render(, document.getElementById(“root”));

跑起来看看效果，一定会发现「咦？什么也没有显示」：

<img loading="lazy" width="2096" height="1174" class="alignnone size-full wp-image-5119 shadow" src="https://haomou.oss-cn-beijing.aliyuncs.com/upload/2019/10/img_5db7fa5c1b3c4.png" data-src="https://haomou.oss-cn-beijing.aliyuncs.com/upload/2019/10/img_5db7fa5c1b3c4.png?x-oss-process=image/format,webp" alt="" srcset="https://haomou.oss-cn-beijing.aliyuncs.com/upload/2019/10/img_5db7fa5c1b3c4.png?x-oss-process=image/format,webp 2096w, https://haomou.oss-cn-beijing.aliyuncs.com/upload/2019/10/img_5db7fa5c1b3c4.png?x-oss-process=image/quality,q_50/resize,m_fill,w_300,h_168/format,webp 300w, https://haomou.oss-cn-beijing.aliyuncs.com/upload/2019/10/img_5db7fa5c1b3c4.png?x-oss-process=image/quality,q_50/resize,m_fill,w_768,h_430/format,webp 768w, https://haomou.oss-cn-beijing.aliyuncs.com/upload/2019/10/img_5db7fa5c1b3c4.png?x-oss-process=image/quality,q_50/resize,m_fill,w_800,h_448/format,webp 800w" sizes="(max-width: 2096px) 100vw, 2096px" />

在这里需要稍注意一下，在一个元素上附加了 Shadow DOM 后，元素原本的「子元素」将不会再显示，并且这些子元素也不在 Shadow DOM 中，只有 host.shadowRoot  的子元素才是「子 DOM 树」中一部分。也就是说这个「子 DOM 树」的「根节点」是 host.shadowRoot 而非 host。 host.shadowRoot 是 ShadowRoot 的实例，而 ShadowRoot 则继承于 DocumentFragment，可通过原生 DOM API 操作其子元素。



[我们](https://www.w3cdoc.com)需通过 Element.attachShadow 附加到元素，然后就能拿到附加后的 ShadowRoot 实例。 针对 ShadowRoot 这样一个原生 DOM Node 的的引用，除了利用 ReactDOM.render 或 ReactDOM.createPortal  ，[我们](https://www.w3cdoc.com)并不能轻易的将 React.Element 渲染到其中，除非直接接操作 DOM。



<h2 id="10">
  6.2. 基于直接操作 DOM 改造一版


在 React 中通过 ref 拿到真实的 DOM 引用后，是否能通过原生的 DOM  API，将 host 的 children 移动到 host.shadowRoot 中？


  
    ```
import React from "react";
import ReactDOM from "react-dom";

// 基于直接操作 DOM 的方式改造的一版
export class ShadowView extends React.Component {
attachShadow = (host: Element) => {
  const shadowRoot = host.attachShadow({ mode: "open" });
  //将所有 children 移到 shadowRoot 中
  [].slice.call(host.children).forEach(child => {
    shadowRoot.appendChild(child);
  });
}
render() {
  const { children } = this.props;
  return <div ref={this.attachShadow}>
    {children}
    </div>
  ;
}
}

// 验证一下
export class App extends React.Component {
state = { message: '...' };
onBtnClick = () => {
  this.setState({ message: 'haha' });
}
render() {
  const { message } = this.state;
  return <div>
    <ShadowView>
      <div>{message}</div>
      内部单击
    </ShadowView>
    外部单击
  </div>
}
}

ReactDOM.render(<App />, document.getElementById("root"));

在浏览器中看看效果，可以看到是可以正常显示的。但与此同时会发现一个问题「隔离在 ShadowRoot 中的元素上的事件无法被触发了」，这是什么原因呢？

是由于 React 的「合成事件机制」的导致的，我们知道在 React 中「事件」并不会直接绑定到具体的 DOM 元素上，而是通过在 document 上绑定的 ReactEventListener 来管理， 当时元素被单击或触发其他事件时，事件被 dispatch 到 document 时将由 React 进行处理并触发相应合成事件的执行。

那为什么合成事件在 Shadow DOM 中不能被正常触发？是因为当在 Shadow DOM 外部捕获时浏览器会对事件进行「重定向」，也就是说在 Shadow DOM 中发生的事件在外部捕获时将会使用 host 元素作为事件源。这将让 React 在处理合成事件时，不认为 ShadowDOM 中元素基于 JSX 语法绑定的事件被触发了。

利用 ReactDOM.render 改造一下 #

ReactDOM.render 的第二个参数，可传入一个 DOM 元素。那是不是能通过 ReactDOM.render 将 React Eements 渲染到 Shodaw DOM 中呢？看一下如下尝试：

import React from "react";
import ReactDOM from "react-dom";

// 换用 ReactDOM.render 实现
export class ShadowView extends React.Component {
attachShadow = (host: Element) => {
  const { children } = this.props;
  const shadowRoot = host.attachShadow({ mode: "open" });
  ReactDOM.render(children, shadowRoot);
}
render() {
  return <div ref={this.attachShadow}></div>;
}
}

// 试试效果如何
export class App extends React.Component {
state = { message: '...' };
onBtnClick = () => {
  this.setState({ message: 'haha' });
  alert('haha');
}
render() {
  const { message } = this.state;
  return <ShadowView>
    <div>{message}</div>
    <button onClick={onBtnClick}>单击我</button>
  </ShadowView>
}
}

ReactDOM.render(<App />, document.getElementById("root"));

可以看到通过 ReactDOM.render 进行 children 的渲染，是能够正常渲染到 Shadow Root 中，并且在 Shadow DOM 中合成事件也是能正常触发执行的。

为什么此时「隔离在 Shadow DOM 中的元素事件」能够被触发了呢？ 因为在 Reac 在发现渲染的目标在 ShadowRoot 中时，将会将事件绑定在通过 Element.getRootNode() 获取的 DocumentFragment 的 RootNode 上。

看似一切顺利，但却会发现父组件的 state 更新时，而 ShadowView 组件并没有更新。如上边的示例，其中的 message 显示的还是旧的，而原因就在我们使用 ReactDOM.render 时，Shadow DOM 的元素和父组件不在一个 React 渲染上下文中了。

利用 ReactDOM.createPortal 实现一版 #

我们知道 createPortal 的出现为「弹窗、提示框」等脱离文档流的组件开发提供了便利，替换了之前不稳定的 API unstable_renderSubtreeIntoContainer。

ReactDOM.createPortal 有一个特性是「通过 createPortal 渲染的 DOM，事件可以从 Portal 的入口端冒泡上来」，这一特性很关键，没有父子关系的 DOM ，合成事件能冒泡过来，那通过  createPortal 渲染到 Shadow DOM 中的元素的事件也能正常触发吧？并且能让所有元素的渲染在一个上下文中。那就基于 createPortal 实现一下：

import React from "react";
import ReactDOM from "react-dom";

// 利用 ReactDOM.createPortal 的实现
export function ShadowContent({ root, children }) {
return ReactDOM.createPortal(children, root);
}

export class ShadowView extends React.Component {
state = { root: null };
setRoot = eleemnt => {
  const root = eleemnt.attachShadow({ mode: "open" });
  this.setState({ root });
};
render() {
  const { children } = this.props;
  const { root } = this.state;
  return <div ref={this.setRoot}>
    {root && <ShadowContent root={root} >
      {children}
    </ShadowContent>}
    </div>
  ;
}
}

// 试试如何
export class App extends React.Component {
state = { message: '...' };
onBtnClick = () => {
  this.setState({ message: 'haha' });
}
render() {
  const { message } = this.state;
  return <ShadowView>
    <div>{message}</div>
    <button onClick={onBtnClick}>单击我</button>
  </ShadowView>
}
}

ReactDOM.render(<App />, document.getElementById("root"));

Wow! 一切正常，有一个小问题是 createPortal 不支持 React 16 以下的版本，但大多数情况下这并不是个什么大问题。

面向 React 的 ShadowView 组件 #

上边提到了几种在 React 中实现 Shadwo DOM 组件的方法，而 ShadowView 是一个写好的可开箱即用的面向 React 的 Shadow DOM 容器组件，利用 ShadowView 可以像普通组件一样方便的在 React 应用中创建启用 Shadow DOM 的容器元素。

ShadowView 目前完整兼容支持 React 15/16，组件的「事件处理、组件渲染更新」等行为在两个版中都是一致的。

GitHub: https://github.com/Houfeng/shadow-view

安装组件 #

npm i shadow-view --save

使用组件 #

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ShadowView } from "shadow-view";

function App() {
return (
  <ShadowView
      styleContent={`*{color:red;}`}
      styleSheets={[
        'your_style1_url.css',
        'your_style2_url.css'
      ]}
  >
    <style>{`在这儿也可写内部样式`}</style>
    <div>这是一个测试</div>
  </ShadowView>
);
}

ReactDOM.render(<App/>, document.getElementById('root'));

组件属性 #

那么，ShadowView 是如何兼容支持 React 15 的呢？ 可在 https://github.com/Houfeng/shadow-view 一探究竟。

END