<shadow>-阴影DOM(已废弃)

<shadow> 是 HTML 中一个已被废弃的标签，用于在 Shadow DOM 中插入内容。随着 Web 组件标准的演进，它被更现代的 <slot> 替代。尽管不再推荐使用，但了解它的历史和工作原理仍有意义。

<shadow> 的基本作用

<shadow> 标签的主要功能是在 Shadow DOM 中复用宿主元素的原有内容。它允许开发者在自定义元素的 Shadow DOM 内部保留原始 DOM 结构。以下是一个典型的使用场景：

<!-- 宿主元素 -->
<div id="host">
  <p>原始内容</p>
</div>

<script>
  const host = document.getElementById('host');
  const shadowRoot = host.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <style>p { color: red; }</style>
    <shadow></shadow>
    <p>新增的Shadow内容</p>
  `;
</script>

在这个例子中：

1. 宿主元素 <div> 包含一个 <p> 元素
2. 通过 attachShadow 方法创建 Shadow DOM
3. <shadow> 标签保留了原始 <p> 内容
4. Shadow DOM 中还添加了新的红色样式和额外内容

与 <content> 标签的区别

在早期 Shadow DOM 规范中，<content> 和 <shadow> 常被混淆：

• <content> 通过 select 属性选择特定节点
• <shadow> 则直接投影全部子节点

<!-- 使用content选择特定内容 -->
<template>
  <content select=".header"></content>
</template>

<!-- 使用shadow保留所有内容 -->
<template>
  <shadow></shadow>
</template>

废弃原因与技术替代

<shadow> 被废弃主要因为：

1. 嵌套限制：每个 Shadow DOM 只能包含一个 <shadow> 标签
2. 语义模糊：与 <content> 功能存在重叠
3. 组件化演进：Web Components 标准转向更明确的 <slot> 机制

现代替代方案使用 <slot>：

<!-- 现代实现方式 -->
<div id="host">
  <p slot="content">原始内容</p>
</div>

<script>
  const host = document.getElementById('host');
  const shadowRoot = host.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <style>::slotted(p) { color: blue; }</style>
    <slot name="content"></slot>
  `;
</script>

浏览器兼容性与降级方案

尽管现代浏览器已移除对 <shadow> 的支持，但在遗留代码中可能遇到它。检测支持情况的方法：

const isShadowSupported = 'createShadowRoot' in document.body && 
                         !('attachShadow' in Element.prototype);

对于需要兼容的场景，可以使用条件判断：

if (isShadowSupported) {
  // 旧版API
  const shadow = host.createShadowRoot();
  shadow.innerHTML = '<shadow></shadow>';
} else {
  // 新版API
  const shadow = host.attachShadow({ mode: 'open' });
  shadow.innerHTML = '<slot></slot>';
}

实际应用中的注意事项

在使用或迁移 <shadow> 时需要注意：

1. 样式穿透问题：旧版 /deep/ 和 ::shadow 选择器已废弃
2. 事件冒泡差异：Shadow DOM 内事件默认不会冒泡到外部
3. 性能影响：多层 <shadow> 嵌套会导致渲染性能下降

事件处理的典型模式：

shadowRoot.addEventListener('click', e => {
  e.stopPropagation(); // 阻止事件冒泡
  console.log('Shadow DOM内部点击');
});

与其他技术的交互

<shadow> 与某些库/框架的特殊交互：

1. jQuery：直接操作 Shadow DOM 需要额外配置

   $.fn.shadowFind = function(selector) {
     return this.map(function() {
       return this.shadowRoot.querySelectorAll(selector);
     });
   };
   

2. React：需要手动处理 Shadow DOM 挂载

   class ShadowComponent extends React.Component {
     componentDidMount() {
       const shadow = this.container.attachShadow({ mode: 'open' });
       ReactDOM.render(this.props.children, shadow);
     }
     render() {
       return <div ref={el => this.container = el} />;
     }
   }
   

历史版本中的特殊行为

在 Chrome 25-35 版本中，<shadow> 表现出一些独特行为：

1. 伪类匹配：:host-context 在 <shadow> 树中表现不一致
2. CSS 继承：inherit 关键字有时会跳过 <shadow> 边界
3. 重绘问题：动态修改 <shadow> 内容可能导致布局抖动

一个典型的边界案例：

/* 在旧版浏览器中可能无效 */
:host-context(.dark) <shadow> {
  background: #333;
}

调试与检测工具

针对遗留 <shadow> 的调试技巧：

1. Chrome DevTools 的 Elements 面板中启用 Show user agent shadow DOM
2. 使用控制台命令检测：

   document.querySelector('shadow').getDistributedNodes();
   

3. 特性检测函数：

   function supportsShadow() {
     return 'createShadowRoot' in document.createElement('div') ||
            'attachShadow' in Element.prototype;
   }
   

迁移路径示例

将旧代码迁移到现代标准的完整示例：

旧版实现：

<x-widget>
  <div class="content">老内容</div>
</x-widget>

<script>
  const proto = Object.create(HTMLElement.prototype);
  proto.createdCallback = function() {
    const root = this.createShadowRoot();
    root.innerHTML = `
      <style>.content { color: green; }</style>
      <shadow></shadow>
    `;
  };
  document.registerElement('x-widget', { prototype: proto });
</script>

现代实现：

<x-widget>
  <div slot="content">新内容</div>
</x-widget>

<script>
  class XWidget extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <style>::slotted(.content) { color: blue; }</style>
        <slot name="content"></slot>
      `;
    }
  }
  customElements.define('x-widget', XWidget);
</script>

底层原理剖析

<shadow> 的工作机制涉及几个关键步骤：

1. 分布节点：浏览器创建"分布树"(distribution tree)
2. 渲染合并：将原始内容与 Shadow DOM 合并
3. 样式隔离：应用 Shadow DOM 的样式作用域

伪代码表示的核心算法：

function renderShadow(host, shadowRoot) {
  if (shadowRoot.contains('<shadow>')) {
    const distributedNodes = host.childNodes;
    renderNodes(distributedNodes);
  }
  renderShadowContent(shadowRoot);
}

性能优化考量

使用 <shadow> 时的性能陷阱：

1. 重复布局：每次修改 <shadow> 都会触发完整布局
2. 内存泄漏：旧版实现可能保持对宿主元素的引用
3. 复合层爆炸：多层 <shadow> 嵌套会增加GPU内存占用

优化策略示例：

// 使用文档片段批量操作
const fragment = document.createDocumentFragment();
const shadow = fragment.appendChild(document.createElement('shadow'));
host.shadowRoot.appendChild(fragment);

安全边界问题

<shadow> 引入的安全考虑：

1. 封闭模式：mode: 'closed' 使 <shadow> 完全不可访问
2. 脚本注入：动态插入的 <shadow> 可能绕过CSP限制
3. 隐私泄露：:host 选择器可能暴露组件内部状态

安全实践示例：

Object.defineProperty(Element.prototype, 'createShadowRoot', {
  configurable: false,
  writable: false
});

规范演进时间线

关键标准变更节点：

1. 2013年：Chrome 25 首次实现 <shadow>
2. 2015年：Web Components v1 草案废弃该标签
3. 2016年：Chrome 53 默认禁用 <shadow>
4. 2018年：完全从主流浏览器移除

多级投影场景

在嵌套自定义元素时的特殊处理：

<x-outer>
  <x-inner>
    <p>内容</p>
  </x-inner>
</x-outer>

<script>
  // 旧版实现
  const innerProto = Object.create(HTMLElement.prototype);
  innerProto.createdCallback = function() {
    const root = this.createShadowRoot();
    root.innerHTML = '<shadow></shadow><div>inner</div>';
  };
  
  const outerProto = Object.create(HTMLElement.prototype);
  outerProto.createdCallback = function() {
    const root = this.createShadowRoot();
    root.innerHTML = '<shadow></shadow><div>outer</div>';
  };
</script>

样式穿透的历史方案

在 <shadow> 时代控制样式的几种方式：

1. /deep/ 组合符：

   x-foo /deep/ .content {
     color: red;
   }
   

2. ::shadow 伪元素：

   x-foo::shadow .content {
     background: yellow;
   }
   

3. :host 规则：

   :host {
     display: block;
   }
   

自定义元素生命周期

使用 <shadow> 时的生命周期变化：

proto.attachedCallback = function() {
  console.log('添加到DOM时触发');
};

proto.detachedCallback = function() {
  console.log('从DOM移除时触发');
};

proto.attributeChangedCallback = function(name, oldVal, newVal) {
  console.log('属性变化时触发');
};

服务端渲染影响

SSR 环境下处理 Shadow DOM 的注意事项：

1. hydration 问题：客户端激活时可能丢失 <shadow> 内容
2. 样式排序：服务端生成的样式可能被 Shadow DOM 重置
3. polyfill 方案：使用 shadydom 和 shadycss 模拟

Node.js 中的模拟实现：

const { JSDOM } = require('jsdom');
const dom = new JSDOM(`
  <template shadowroot="open">
    <shadow></shadow>
  </template>
`);

测试策略调整

针对 <shadow> 的测试方法：

1. 单元测试：mock ShadowRoot API

   beforeEach(() => {
     Element.prototype.createShadowRoot = jest.fn();
   });
   

2. 集成测试：使用 WebDriver 的特殊命令

   // Selenium 示例
   driver.executeScript("return document.querySelector('x-foo').shadowRoot");
   

3. 视觉回归：需要特别处理 Shadow DOM 边界

可访问性挑战

屏幕阅读器对 <shadow> 的支持问题：

1. ARIA 属性穿透：role 和 aria-* 属性需要显式传递
2. 焦点管理：Tab 键顺序在 Shadow DOM 中可能中断
3. 文本替代：alt 和 aria-label 需要重新声明

增强可访问性的模式：

<shadow aria-hidden="true"></shadow>
<div role="region" aria-label="内容区域">
  <!-- 实际可访问内容 -->
</div>

移动端特殊行为

在移动浏览器上的表现差异：

1. iOS Safari：直到 iOS 12 才完全支持 Shadow DOM v1
2. Android WebView：早期版本需要启用实验性标志
3. 触摸事件：touchstart 在 <shadow> 边界可能不冒泡

针对触摸设备的补救措施：

shadowRoot.addEventListener('touchstart', e => {
  e.preventDefault();
  e.target.dispatchEvent(new MouseEvent('click'));
}, { passive: false });