[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content-what_is_shadow_dom":3,"$f2uarpsm9czbne":21},{"id":4,"type":5,"slug":6,"title":7,"date":8,"category":9,"tags":10,"body_markdown":12,"permalink":13,"excerpt_src":14,"media_type":14,"media_title":14,"media_author":14,"media_url":14,"rating":14,"layout":14,"pv":15,"admin_only":15,"created_at":16,"updated_at":16,"deleted_at":14,"status":17,"html":18,"excerpt":19,"cover":20},158,"article","what_is_shadow_dom","[译]什么是Shadow Dom？","2012-06-07 18:24","web",[11],"ShadowDOM","\n如果你做过网站，那么很可能你已经用过一些JavaScript类库。既然如此，你可能会对这些不知名的类库作者心存感激。\n\n这些作者——web开发领域的勇士们——都面对着同样的一个问题——封装。他们会花大量的精力在面向对象的经典问题之一上面，即如何封装自己的代码，以便与类库使用者的代码分离。\n\n除了SVG，现在的Web平台只提供了一种原生的方法去隔离代码块，这并不优雅。没错，我说的就是iframe。对大部分需要封装的场景来说，frames太重而且限制太多。\n\n如果我需要把每个自定义的按钮都放到iframe里，你是什么感觉，会不会疯掉？\n\n所以，我们需要一些更好的东西。事实上，大部分的浏览器已经变相地提供了一种强大技术去隐藏一些实现细节。这个技术就是所谓的“shadow DOM”。\n\n\u003C!-- more -->\n\n### 我的名字是DOM，Shadow DOM\n\nShadow DOM是指浏览器的一种能力，它允许在文档（`document`）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。看一个简单的slider：\n\n```html\n\u003Cinput id=\"foo\" type=\"range\"\u002F>\n```\n\n把这段代码放到webkit内核的浏览器中，它会这样显示：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F1.png)\n\n很简单吧，这里有一个滑槽，还有一个滑块可以沿滑槽滑动。\n\n嗯。一切看起来都那么美好，喝杯咖啡先……等下等下，这里居然有一个可以在`input`元素中滑动的元素！为什么我不能通过JavaScript看到它？\n\n```javascript\nvar slider = document.getElementsById(\"foo\");\nconsole.log(slider.firstChild); \u002F\u002F 返回 null\n```\n\n这是一种魔法么？\n\n我的观点来看，不是。这只是shadow DOM在起作用。你看，浏览器的开发者们已经意识到了手工编写这些DOM元素的表现和行为很困难而且很SB。所以，从一定程度上讲，他们骗了我们，给了我们一个输入框，但拥有比输入框更多的功能。\n\n他们为你——web开发者设定了一个边界，界定了哪些是你可以访问的，哪些实现细节是访问不到的。然而，浏览器本身却可以随意跨越这个边界。设置这样一个边界之后，它们就可以在你看不见的地方使用熟悉的web技术、同样的HTML元素去创建更多的功能，而不是像你一样要在页面上用div和span来堆。\n\n有一些很简单，就像上面说的slider。而有一些却相当复杂。我们来看一下`video`元素，它有一些按钮、进度条、hover态的音量控制，像这样：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F2.png)\n\n所有的这一切都只是HTML和CSS——但是是隐藏在shadow DOM子树中的。\n\n借用XXX的一首诗，“它是怎样工作的？”为了直观一些，我们假装可以用JavaScript操作它。看这个简单的页面：\n\n```html\n\u003Chtml>\n\u003Chead>\n\u003Cstyle> p { color: Green; } \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\u003Cp>My Future is so bright\u003C\u002Fp>\n\u003Cdiv id=\"foo\">\u003C\u002Fdiv>\n\u003Cscript>\n    var foo = document.getElementById('foo');\n    \u002F\u002F 注意：这里只是模拟，不是真实的API\n    foo.shadow = document.createElement('p');\n    foo.shadow.textContent = 'I gotta wear shades';\n\u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n我们获得了一个这样的DOM树：\n\n```html\n\u003Cp>My Future is so bright\u003C\u002Fp>\n\u003Cdiv id=\"foo\">\u003C\u002Fdiv>\n```\n\n但是它像是被这样渲染出来的：\n\n```html\n\u003Cp>My Future is so bright\u003C\u002Fp>\n\u003Cdiv id=\"foo\"> \u003C!-- shadow subtree begins -->\n    \u003Cp>I gotta wear shades\u003C\u002Fp>\n\u003C\u002Fdiv> \u003C!-- shadow subtree ends -->\n```\n\n看起来是这样：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F3.png)\n\n注意一下，为什么渲染的句子的第二部分不是绿色的？这是因为文档（document）中选择器p不能获取到shadown DOM。很酷对不对？！如果一个框架开发者被赋予这样的能力会怎么样？想象一下你只需要写你的widget，而不用担心被不知哪里蹦出来的选择器愚弄……简直令人陶醉。\n\n### 事件的情况\n\n为了保持自然，shadow DOM子树中的事件可以在文档（document）中被监听。比如，你点击一下`audio`元素中的静音按钮，你可以在一个包裹它的div中监听到这个事件。\n\n```html\n\u003Cdiv onclick=\"alert('who dat?')\">\n    \u003Caudio controls src=\"test.wav\">\u003C\u002Faudio>\n\u003C\u002Fdiv>\n```\n\n但是，如果你要确认事件的来源，会发现它是audio元素，而不是它内部的按钮。\n\n```html\n\u003Cdiv onclick=\"alert('fired by:' + event.target)\">\n    \u003Caudio controls src=\"test.wav\">\u003C\u002Faudio>\n\u003C\u002Fdiv>\n```\n\n为什么这样？因为当事件穿过shadown DOM边界的时候，会被重新设定`target`，以避免暴露shadow DOM子树内部结构。用这种方式，你可以监听到从shadow DOM中产生的事件，而实现者也可以继续隐藏细节。\n\n### 通过CSS访问（Reaching into）Shadow\n\n另一个需要提到的技巧是怎样通过CSS来访问shadow DOM子树。假设我想自定义我的slider。我想让它有一些样式，而不是系统原生的那样，像这样：\n\n```css\ninput[type=range].custom {\n    -webkit-appearance: none;\n    background-color: Red;\n    width: 200px;\n}\n```\n\n结果如下：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F4.png)\n\n很好，但是我怎样定义滑块的样式呢？我们已经知道，常规的CSS选择器并不能获取到shadow DOM子树。但事实上，这里有一些很方便的伪元素，可以取到shadow DOM子树中的元素。例如，slider中的滑块在webkit中可以这样访问：\n\n```css\ninput[type=range].custom::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    background-color: Green;\n    opacity: 0.5;\n    width: 10px;\n    height: 40px;\n}\n```\n\n样子如下：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F5.png)\n\n很完美对不对？想想看，你可以为shadow DOM子树中的元素赋予样式，而不需要真的访问到这些元素。而这些shadow DOM的作者有了决定哪些部分可以被赋予样式的权利。如果你是作者，在做一些UI widget toolkit的时候，难道不想有这样的能力吗？\n\n### 带有洞（hole）的Shadow DOM，无穷的想象力\n\n讲完了这些令人惊叹的能力，我们想象一样，如果给一个有shadown DOM子树的元素插入子元素会怎样？我们来实验一下：\n\n```javascript\n\u002F\u002F Create an element with a shadow DOM subtree.\nvar input = document.body.appendChild(document.createElement('input'));\n\u002F\u002F Add a child to it.\nvar test = input.appendChild(document.createElement('p'));\n\u002F\u002F .. with some text.\ntest.textContent = 'Team Edward';\n```\n\n结果如下：\n\n![slider](\u002Fassets\u002Fwhat_is_shadow_dom\u002F6.png)\n\n哇！欢迎来到twilight DOM的世界！它是文档（document）的一部分，可以被遍历到，但是不会渲染！它是不是很有用呢？不一定，但是如果你需要的话它确实就在那等你。\n\n但是，如果我们真的有能力把元素的子元素放入shadow DOM子树中会怎么样？想象一下shadow DOM是一个模板，通过它的某个洞（hole）可以看到内部的子元素：\n\n```javascript\n\u002F\u002F 注意：这里只是模拟，不是真实的API\nvar element = document.getElementById('element');\n\u002F\u002F 创建shadow DOM子树\nelement.shadow = document.createElement('div');\nelement.shadow.innerHTML = '\u003Ch1>Think of the Children\u003C\u002Fh1>' +\n    '\u003Cdiv class=\"children\">{{children-go-here}}\u003C\u002Fdiv>';\n\u002F\u002F Now add some children.\nvar test = element.appendChild(document.createElement('p'));\ntest.textContent = 'I see the light!';\n```\n\n如果你去遍历DOM，你会看到这个：\n\n```html\n\u003Cdiv id=\"element\">\n    \u003Cp>I see the light\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n但是像是这样渲染出来的：\n\n```html\n\u003Cdiv id=\"element\">\n    \u003Cdiv> \u003C!-- shadow tree begins -->\n        \u003Ch1>Think of the Children\u003C\u002Fh1>\n        \u003Cdiv class=\"children\"> \u003C!-- shadow tree hole begins -->\n            \u003Cp>I see the light\u003C\u002Fp>\n        \u003C\u002Fdiv> \u003C!-- shadow tree hole ends -->\n    \u003C\u002Fdiv> \u003C!-- shadow tree ends -->\n\u003C\u002Fdiv>\n```\n\n当你添加子元素的时候，从DOM树中看像一个正常的子元素，但是渲染的时候，他们从“洞（hole）”中进到了shadow DOM子树。\n\n写到这里，你应该会承认，这真的很酷，也会问：\n\n浏览器中什么时候才会有呢？\n\n### 家庭作业\n\n你认为听完了这么多说教的内容会没有家庭作业？作为一个JavaScript类库或者框架的开发者，尝试者去想象一下你可以利用shadow DOM制作的跟之前不一样的伟大的东西。然后想一下shadow DOM可以应用到的一些特定的使用场景（加上真实的或者模拟的代码）。\n\n最后，共享你想到的使用场景到public-webapps邮件列表。关于在web平台中加入这种能力的讨论正在进行，我们需要你的帮助。\n\n如果你不是一个框架作者，你仍然可以参与进来，你可以给shadown DOM加油，也可以将这份快乐传播到你最喜欢的社交网络上，因为快乐就是我们工作的全部。\n\n附：SVG和shadow DOM\n\n差点忘了，至于你信不信，我反正信了，SVG确实已经用到了shadow DOM，从一开始就是这样。但是比较麻烦的是，SVG的shadow DOM非常……非常……水（shady），不不，不是这个词，是另一个词，以sh开头，以y结尾。（译注：对英文语境不是太熟悉，评论中有人提到是shy。）对对，就是它！我可以继续说，但是请相信我对SVG shadow DOM的评价。或者你可以查看文档。\n\n原文地址：\u003Chttp:\u002F\u002Fglazkov.com\u002F2011\u002F01\u002F14\u002Fwhat-the-heck-is-shadow-dom\u002F>\n\n译者注：应该说这是一篇关于前端理论的文章，并不能给前端开发人员带来什么便利，至少短期内没有，但是了解这种技术对我们从事web相关的软件开发会有好处，而且指不定哪天这种开发模式就出现了呢！\n\n> 2013年5月24日更新：修正了一下之前翻译不通的地方。另外Chrome 23+已经实现了Shadow Dom，Chrome 25+已经默认打开了Shadow Dom的使用选项。因此，现在可以有一些更具体的案例可以看了，比如\u003Chttps:\u002F\u002Fgithub.com\u002FTooooBug\u002FshadowDatePicker>。\n","\u002Farticle\u002Fwhat_is_shadow_dom.html",null,0,"2026-08-28 04:37:17","published","\u003Cp>如果你做过网站，那么很可能你已经用过一些JavaScript类库。既然如此，你可能会对这些不知名的类库作者心存感激。\u003C\u002Fp>\n\u003Cp>这些作者——web开发领域的勇士们——都面对着同样的一个问题——封装。他们会花大量的精力在面向对象的经典问题之一上面，即如何封装自己的代码，以便与类库使用者的代码分离。\u003C\u002Fp>\n\u003Cp>除了SVG，现在的Web平台只提供了一种原生的方法去隔离代码块，这并不优雅。没错，我说的就是iframe。对大部分需要封装的场景来说，frames太重而且限制太多。\u003C\u002Fp>\n\u003Cp>如果我需要把每个自定义的按钮都放到iframe里，你是什么感觉，会不会疯掉？\u003C\u002Fp>\n\u003Cp>所以，我们需要一些更好的东西。事实上，大部分的浏览器已经变相地提供了一种强大技术去隐藏一些实现细节。这个技术就是所谓的“shadow DOM”。\u003C\u002Fp>\n\u003Ch3>我的名字是DOM，Shadow DOM\u003C\u002Fh3>\n\u003Cp>Shadow DOM是指浏览器的一种能力，它允许在文档（\u003Ccode>document\u003C\u002Fcode>）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。看一个简单的slider：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><input id="foo" type="range"\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>把这段代码放到webkit内核的浏览器中，它会这样显示：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fwhat_is_shadow_dom\u002F1.png\" alt=\"slider\">\u003C\u002Fp>\n\u003Cp>很简单吧，这里有一个滑槽，还有一个滑块可以沿滑槽滑动。\u003C\u002Fp>\n\u003Cp>嗯。一切看起来都那么美好，喝杯咖啡先……等下等下，这里居然有一个可以在\u003Ccode>input\u003C\u002Fcode>元素中滑动的元素！为什么我不能通过JavaScript看到它？\u003C\u002Fp>\n\u003Cpre>\u003Ccode>var slider = document.getElementsById("foo");\nconsole.log(slider.firstChild); \u002F\u002F 返回 null\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这是一种魔法么？\u003C\u002Fp>\n\u003Cp>我的观点来看，不是。这只是shadow DOM在起作用。你看，浏览器的开发者们已经意识到了手工编写这些DOM元素的表现和行为很困难而且很SB。所以，从一定程度上讲，他们骗了我们，给了我们一个输入框，但拥有比输入框更多的功能。\u003C\u002Fp>\n\u003Cp>他们为你——web开发者设定了一个边界，界定了哪些是你可以访问的，哪些实现细节是访问不到的。然而，浏览器本身却可以随意跨越这个边界。设置这样一个边界之后，它们就可以在你看不见的地方使用熟悉的web技术、同样的HTML元素去创建更多的功能，而不是像你一样要在页面上用div和span来堆。\u003C\u002Fp>\n\u003Cp>有一些很简单，就像上面说的slider。而有一些却相当复杂。我们来看一下\u003Ccode>video\u003C\u002Fcode>元素，它有一些按钮、进度条、hover态的音量控制，像这样：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fwhat_is_shadow_dom\u002F2.png\" alt=\"slider\">\u003C\u002Fp>\n\u003Cp>所有的这一切都只是HTML和CSS——但是是隐藏在shadow DOM子树中的。\u003C\u002Fp>\n\u003Cp>借用XXX的一首诗，“它是怎样工作的？”为了直观一些，我们假装可以用JavaScript操作它。看这个简单的页面：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><html>\n<head>\n<style> p { color: Green; } <\u002Fstyle>\n<\u002Fhead>\n<body>\n<p>My Future is so bright<\u002Fp>\n<div id="foo"><\u002Fdiv>\n<script>\n    var foo = document.getElementById('foo');\n    \u002F\u002F 注意：这里只是模拟，不是真实的API\n    foo.shadow = document.createElement('p');\n    foo.shadow.textContent = 'I gotta wear shades';\n<\u002Fscript>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>我们获得了一个这样的DOM树：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><p>My Future is so bright<\u002Fp>\n<div id="foo"><\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但是它像是被这样渲染出来的：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><p>My Future is so bright<\u002Fp>\n<div id="foo"> <!-- shadow subtree begins -->\n    <p>I gotta wear shades<\u002Fp>\n<\u002Fdiv> <!-- shadow subtree ends -->\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>看起来是这样：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fwhat_is_shadow_dom\u002F3.png\" alt=\"slider\">\u003C\u002Fp>\n\u003Cp>注意一下，为什么渲染的句子的第二部分不是绿色的？这是因为文档（document）中选择器p不能获取到shadown DOM。很酷对不对？！如果一个框架开发者被赋予这样的能力会怎么样？想象一下你只需要写你的widget，而不用担心被不知哪里蹦出来的选择器愚弄……简直令人陶醉。\u003C\u002Fp>\n\u003Ch3>事件的情况\u003C\u002Fh3>\n\u003Cp>为了保持自然，shadow DOM子树中的事件可以在文档（document）中被监听。比如，你点击一下\u003Ccode>audio\u003C\u002Fcode>元素中的静音按钮，你可以在一个包裹它的div中监听到这个事件。\u003C\u002Fp>\n\u003Cpre>\u003Ccode><div onclick="alert('who dat?')">\n    <audio controls src="test.wav"><\u002Faudio>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但是，如果你要确认事件的来源，会发现它是audio元素，而不是它内部的按钮。\u003C\u002Fp>\n\u003Cpre>\u003Ccode><div onclick="alert('fired by:' + event.target)">\n    <audio controls src="test.wav"><\u002Faudio>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>为什么这样？因为当事件穿过shadown DOM边界的时候，会被重新设定\u003Ccode>target\u003C\u002Fcode>，以避免暴露shadow DOM子树内部结构。用这种方式，你可以监听到从shadow DOM中产生的事件，而实现者也可以继续隐藏细节。\u003C\u002Fp>\n\u003Ch3>通过CSS访问（Reaching into）Shadow\u003C\u002Fh3>\n\u003Cp>另一个需要提到的技巧是怎样通过CSS来访问shadow DOM子树。假设我想自定义我的slider。我想让它有一些样式，而不是系统原生的那样，像这样：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>input[type=range].custom {\n    -webkit-appearance: none;\n    background-color: Red;\n    width: 200px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>结果如下：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fwhat_is_shadow_dom\u002F4.png\" alt=\"slider\">\u003C\u002Fp>\n\u003Cp>很好，但是我怎样定义滑块的样式呢？我们已经知道，常规的CSS选择器并不能获取到shadow DOM子树。但事实上，这里有一些很方便的伪元素，可以取到shadow DOM子树中的元素。例如，slider中的滑块在webkit中可以这样访问：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>input[type=range].custom::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    background-color: Green;\n    opacity: 0.5;\n    width: 10px;\n    height: 40px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>样子如下：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fwhat_is_shadow_dom\u002F5.png\" alt=\"slider\">\u003C\u002Fp>\n\u003Cp>很完美对不对？想想看，你可以为shadow DOM子树中的元素赋予样式，而不需要真的访问到这些元素。而这些shadow DOM的作者有了决定哪些部分可以被赋予样式的权利。如果你是作者，在做一些UI widget toolkit的时候，难道不想有这样的能力吗？\u003C\u002Fp>\n\u003Ch3>带有洞（hole）的Shadow DOM，无穷的想象力\u003C\u002Fh3>\n\u003Cp>讲完了这些令人惊叹的能力，我们想象一样，如果给一个有shadown DOM子树的元素插入子元素会怎样？我们来实验一下：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F\u002F Create an element with a shadow DOM subtree.\nvar input = document.body.appendChild(document.createElement('input'));\n\u002F\u002F Add a child to it.\nvar test = input.appendChild(document.createElement('p'));\n\u002F\u002F .. with some text.\ntest.textContent = 'Team Edward';\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>结果如下：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fwhat_is_shadow_dom\u002F6.png\" alt=\"slider\">\u003C\u002Fp>\n\u003Cp>哇！欢迎来到twilight DOM的世界！它是文档（document）的一部分，可以被遍历到，但是不会渲染！它是不是很有用呢？不一定，但是如果你需要的话它确实就在那等你。\u003C\u002Fp>\n\u003Cp>但是，如果我们真的有能力把元素的子元素放入shadow DOM子树中会怎么样？想象一下shadow DOM是一个模板，通过它的某个洞（hole）可以看到内部的子元素：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F\u002F 注意：这里只是模拟，不是真实的API\nvar element = document.getElementById('element');\n\u002F\u002F 创建shadow DOM子树\nelement.shadow = document.createElement('div');\nelement.shadow.innerHTML = '<h1>Think of the Children<\u002Fh1>' +\n    '<div class="children">{{children-go-here}}<\u002Fdiv>';\n\u002F\u002F Now add some children.\nvar test = element.appendChild(document.createElement('p'));\ntest.textContent = 'I see the light!';\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>如果你去遍历DOM，你会看到这个：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><div id="element">\n    <p>I see the light<\u002Fp>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但是像是这样渲染出来的：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><div id="element">\n    <div> <!-- shadow tree begins -->\n        <h1>Think of the Children<\u002Fh1>\n        <div class="children"> <!-- shadow tree hole begins -->\n            <p>I see the light<\u002Fp>\n        <\u002Fdiv> <!-- shadow tree hole ends -->\n    <\u002Fdiv> <!-- shadow tree ends -->\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>当你添加子元素的时候，从DOM树中看像一个正常的子元素，但是渲染的时候，他们从“洞（hole）”中进到了shadow DOM子树。\u003C\u002Fp>\n\u003Cp>写到这里，你应该会承认，这真的很酷，也会问：\u003C\u002Fp>\n\u003Cp>浏览器中什么时候才会有呢？\u003C\u002Fp>\n\u003Ch3>家庭作业\u003C\u002Fh3>\n\u003Cp>你认为听完了这么多说教的内容会没有家庭作业？作为一个JavaScript类库或者框架的开发者，尝试者去想象一下你可以利用shadow DOM制作的跟之前不一样的伟大的东西。然后想一下shadow DOM可以应用到的一些特定的使用场景（加上真实的或者模拟的代码）。\u003C\u002Fp>\n\u003Cp>最后，共享你想到的使用场景到public-webapps邮件列表。关于在web平台中加入这种能力的讨论正在进行，我们需要你的帮助。\u003C\u002Fp>\n\u003Cp>如果你不是一个框架作者，你仍然可以参与进来，你可以给shadown DOM加油，也可以将这份快乐传播到你最喜欢的社交网络上，因为快乐就是我们工作的全部。\u003C\u002Fp>\n\u003Cp>附：SVG和shadow DOM\u003C\u002Fp>\n\u003Cp>差点忘了，至于你信不信，我反正信了，SVG确实已经用到了shadow DOM，从一开始就是这样。但是比较麻烦的是，SVG的shadow DOM非常……非常……水（shady），不不，不是这个词，是另一个词，以sh开头，以y结尾。（译注：对英文语境不是太熟悉，评论中有人提到是shy。）对对，就是它！我可以继续说，但是请相信我对SVG shadow DOM的评价。或者你可以查看文档。\u003C\u002Fp>\n\u003Cp>原文地址：\u003Ca href=\"http:\u002F\u002Fglazkov.com\u002F2011\u002F01\u002F14\u002Fwhat-the-heck-is-shadow-dom\u002F\">http:\u002F\u002Fglazkov.com\u002F2011\u002F01\u002F14\u002Fwhat-the-heck-is-shadow-dom\u002F\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>译者注：应该说这是一篇关于前端理论的文章，并不能给前端开发人员带来什么便利，至少短期内没有，但是了解这种技术对我们从事web相关的软件开发会有好处，而且指不定哪天这种开发模式就出现了呢！\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>2013年5月24日更新：修正了一下之前翻译不通的地方。另外Chrome 23+已经实现了Shadow Dom，Chrome 25+已经默认打开了Shadow Dom的使用选项。因此，现在可以有一些更具体的案例可以看了，比如\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTooooBug\u002FshadowDatePicker\">https:\u002F\u002Fgithub.com\u002FTooooBug\u002FshadowDatePicker\u003C\u002Fa>。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n","\u003Cp>如果你做过网站，那么很可能你已经用过一些JavaScript类库。既然如此，你可能会对这些不知名的类库作者心存感激。\u003C\u002Fp>\n\u003Cp>这些作者——web开发领域的勇士们——都面对着同样的一个问题——封装。他们会花大量的精力在面向对象的经典问题之一上面，即如何封装自己的代码，以便与类库使用者的代码分离。\u003C\u002Fp>\n\u003Cp>除了SVG，现在的Web平台只提供了一种原生的方法去隔离代码块，这并不优雅。没错，我说的就是iframe。对大部分需要封装的场景来说，frames太重而且限制太多。\u003C\u002Fp>\n\u003Cp>如果我需要把每个自定义的按钮都放到iframe里，你是什么感觉，会不会疯掉？\u003C\u002Fp>\n\u003Cp>所以，我们需要一些更好的东西。事实上，大部分的浏览器已经变相地提供了一种强大技术去隐藏一些实现细节。这个技术就是所谓的“shadow DOM”。\u003C\u002Fp>\n","https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fwhat_is_shadow_dom\u002F1.png",{"total":22,"totalRoots":23,"comments":24,"pv":15},16,6,[25,33,39,43,47,51,57,61,65,69,75,79,85,89,95,101],{"id":26,"content":27,"user_id":28,"nick":29,"link":30,"date":31,"rid":15,"vote_up":15,"vote_down":15,"visible":32},27,"\u003Cp>有点意思\u003C\u002Fp>",19,"zhouqicf","","2013-03-07 05:37:35",true,{"id":34,"content":35,"user_id":36,"nick":37,"link":30,"date":38,"rid":26,"vote_up":15,"vote_down":15,"visible":32},28,"\u003Cp>chrome25已经默认支持shadow dom了，世界变化得如此之快。\u003C\u002Fp>",2,"TooBug","2013-03-07 06:41:27",{"id":40,"content":41,"user_id":28,"nick":29,"link":30,"date":42,"rid":34,"vote_up":15,"vote_down":15,"visible":32},29,"\u003Cp>\u003Ca href=\"http:\u002F\u002Fhtml5-demos.appspot.com\u002Fstatic\u002Fwebcomponents\u002Findex.html\" rel=\"nofollow noopener\" title=\"http:\u002F\u002Fhtml5-demos.appspot.com\u002Fstatic\u002Fwebcomponents\u002Findex.html\">http:\u002F\u002Fhtml5-demos.appspot....\u003C\u002Fa>\u003Cbr>颠覆\u003C\u002Fp>","2013-03-07 10:59:18",{"id":44,"content":45,"user_id":36,"nick":37,"link":30,"date":46,"rid":40,"vote_up":15,"vote_down":15,"visible":32},30,"\u003Cp>这个slide太棒了，刚好最近在写关于shadow dom的demo，回头好好看一下。\u003C\u002Fp>","2013-03-08 04:36:23",{"id":48,"content":49,"user_id":36,"nick":37,"link":30,"date":50,"rid":15,"vote_up":15,"vote_down":15,"visible":32},31,"\u003Cp>现在再回头看，很多地方没译准确，比如开头那一句，如何在自己的组件和使用组件的代码之间划出一条界限，完全没译出来，有时间再捣鼓一下。\u003C\u002Fp>","2013-05-22 06:08:06",{"id":52,"content":53,"user_id":54,"nick":55,"link":30,"date":56,"rid":15,"vote_up":15,"vote_down":15,"visible":32},32,"\u003Cp>shitty\u003C\u002Fp>",20,"dotnil","2013-05-23 23:50:56",{"id":58,"content":59,"user_id":36,"nick":37,"link":30,"date":60,"rid":52,"vote_up":15,"vote_down":15,"visible":32},33,"\u003Cp>有何高见？欢迎讨论，但不欢迎不礼貌的人。\u003C\u002Fp>","2013-05-24 04:50:24",{"id":62,"content":63,"user_id":54,"nick":55,"link":30,"date":64,"rid":58,"vote_up":15,"vote_down":15,"visible":32},34,"\u003Cp>汗，别误会，我是说他文中提到的那个 sh 开头 y 结尾的词。\u003C\u002Fp>","2013-05-24 16:07:03",{"id":66,"content":67,"user_id":36,"nick":37,"link":30,"date":68,"rid":62,"vote_up":15,"vote_down":15,"visible":32},35,"\u003Cp>Sorry，我误会了，跟你道歉……\u003C\u002Fp>","2013-05-25 02:01:38",{"id":70,"content":71,"user_id":72,"nick":73,"link":30,"date":74,"rid":15,"vote_up":15,"vote_down":15,"visible":32},36,"\u003Cp>var slider = document.getElementsById(\"foo\");\u002F\u002F故意写错的吧，别人转载你，把你的错误也搞过去了\u003Cbr>console.log(slider.firstChild); \u002F\u002F 返回 null\u003C\u002Fp>",21,"草珊瑚","2013-06-04 07:59:23",{"id":76,"content":77,"user_id":36,"nick":37,"link":30,"date":78,"rid":70,"vote_up":15,"vote_down":15,"visible":32},37,"\u003Cp>啊呃，不是故意的，发现原文中代码就是错了，多谢提醒，稍后修正一下。\u003C\u002Fp>","2013-06-04 08:21:28",{"id":80,"content":81,"user_id":82,"nick":83,"link":30,"date":84,"rid":15,"vote_up":15,"vote_down":15,"visible":32},38,"\u003Cp>翻旧文，倒数第三段代码有一个小错误，\u003C\u002Fp>\u003Cp>```\u003Cbr>\u003Cdiv class=\"children\">{{children-go-here}}\u003C\u002Fdiv>';\u003C\u002Fp>\u003Cp>```\u003C\u002Fp>\u003Cp>前面少了个单引号\u003C\u002Fp>",22,"c君不在","2013-09-10 09:51:24",{"id":86,"content":87,"user_id":36,"nick":37,"link":30,"date":88,"rid":80,"vote_up":15,"vote_down":15,"visible":32},39,"\u003Cp>多谢，已经火速修正，等待上线。\u003C\u002Fp>","2013-09-10 10:28:58",{"id":90,"content":91,"user_id":92,"nick":93,"link":30,"date":94,"rid":66,"vote_up":15,"vote_down":15,"visible":32},40,"\u003Cp>sdsadsa\u003C\u002Fp>",23,"sds","2014-01-09 08:38:09",{"id":96,"content":97,"user_id":98,"nick":99,"link":30,"date":100,"rid":15,"vote_up":15,"vote_down":15,"visible":32},41,"\u003Cp>我在想那个词应该是 shabby\u003C\u002Fp>",24,"onetwo","2015-05-30 01:00:36",{"id":102,"content":103,"user_id":104,"nick":105,"link":30,"date":106,"rid":96,"vote_up":15,"vote_down":15,"visible":32},42,"\u003Cp>agreed\u003C\u002Fp>",25,"耿昌宇","2016-02-15 10:25:25"]