aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/web_components
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
commit310fd066e91f454b990372ffa30e803cc8120975 (patch)
treed5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/web_components
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz
translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2
translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/web_components')
-rw-r--r--files/zh-cn/web/web_components/html_imports/index.html (renamed from files/zh-cn/web/web_components/html导入/index.html)0
-rw-r--r--files/zh-cn/web/web_components/status_in_firefox/index.html51
-rw-r--r--files/zh-cn/web/web_components/影子_dom/index.html91
3 files changed, 0 insertions, 142 deletions
diff --git a/files/zh-cn/web/web_components/html导入/index.html b/files/zh-cn/web/web_components/html_imports/index.html
index fe3aeb99cd..fe3aeb99cd 100644
--- a/files/zh-cn/web/web_components/html导入/index.html
+++ b/files/zh-cn/web/web_components/html_imports/index.html
diff --git a/files/zh-cn/web/web_components/status_in_firefox/index.html b/files/zh-cn/web/web_components/status_in_firefox/index.html
deleted file mode 100644
index d57e5adef5..0000000000
--- a/files/zh-cn/web/web_components/status_in_firefox/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Status of Web Components support in Firefox
-slug: Web/Web_Components/Status_in_Firefox
-translation_of: Web/Web_Components/Status_in_Firefox
----
-<p>{{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}</p>
-
-<p><a href="/en-US/docs/Web/Web_Components">Web Components</a> 依旧是一项非常新的技术,它的规范正随着浏览器的实现而不断演变并且 Web 开发者正在测试和使用它。 它的实现状态是变化的并且演变的十分迅速; 这篇文章列出了在 <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> 上的状态, 用于 Firefox 和Firefox OS.</p>
-
-<div class="blob instapaper_body" id="readme">
-<article class="markdown-body entry-content">
-<h2 id="原生支持">原生支持</h2>
-
-<p>下面的特征已经被实现了并且默认在 Firefox and Firefox OS 中被激活:</p>
-
-<ul>
- <li>{{HTMLElement("template")}}</li>
-</ul>
-
-<h2 id="即将到来的特征">即将到来的特征</h2>
-
-<ul>
- <li>一个实现关于新的 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> 共识有望在2016年第一季度达成; <a href="https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update">Anne's</a> 和 <a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">Wilson's</a> 的博客讲述了这些细节。 这依然有 <a href="https://github.com/w3c/webcomponents/labels/shadow-dom">大量的讨论和公开问题</a> 关于这个规范.。并且所有的浏览器实现被有望在未来得到更新.</li>
- <li><strong>自定义元素</strong> 是从头开始, 用一种方式来重建它们使用 ECMAScript 6 “class” 语法 (换而言之, 更少的使用基于原型的语法). 苹果公司的 Ryosuke Niwa 正在填补某些实验性功能使用新的途径.
- <ul>
- <li>旧的语法将可以与新的语法一起在Chrome 中工作一段时间(例如, {{domxref("Element.createShadowRoot()")}} 对应 {{domxref("Element.attachShadow()")}}), 但不能原生的在Firefox中工作。</li>
- </ul>
- </li>
- <li>这将会有一个供应商 <a href="https://github.com/w3c/WebPlatformWG/blob/gh-pages/meetings/29janWC.md">面对面交流的机会在2016年一月</a> 来讨论问来会出现的问题 。</li>
-</ul>
-
-<h2 id="被摒弃的功能">被摒弃的功能</h2>
-
-<p>这些功能已被考虑实现了, 并且有些是实验性实现。但他们将会永远不被实现, 或者被删除。</p>
-
-<ul>
- <li><strong>HTML imports</strong>, 因为我们想等着看看开发者如何使用ES6 模块 (虽然还没有实现; 查看 {{bug(568953)}}). imports是一个早期未完成实现,并且将会被删除从Firefox中。</li>
-</ul>
-
-<h2 id="在Firefox中使用垫片">在Firefox中使用垫片</h2>
-
-<p>这有些注意事项在Firefox中使用垫片的时候:</p>
-
-<ul>
- <li>当你激活原生Web容器支持在Firefox中通过设置 {{pref("dom.webcomponents.enabled")}} 偏好 为 <code>true</code> 在  <code>about:config 中</code>, 这个未完成的原生实现开始运作并且垫片可能会出现混淆; 这会有很大的可能性出现崩溃.</li>
- <li>一个使用 <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a> 垫片生成的Shadow DOM 并没有完全包裹样式, 所以这个 样式 可能会溢出。 要注意使用垫片构建的网址当运行在不支持原生Shadow DOM的环境之下时可能会出现差异.</li>
- <li>这个Shadow DOM 垫片运行时非常缓慢的以为他重写了DOM元素的原型来挂在它的功能 。</li>
- <li>如果你不需要使用 Shadow DOM, 使用 <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents-lite.js</a> 版本的 webcomponents.js 垫片是一个名明智的选择; 这个版本不填补 Shadow DOM.</li>
-</ul>
-</article>
-</div>
diff --git a/files/zh-cn/web/web_components/影子_dom/index.html b/files/zh-cn/web/web_components/影子_dom/index.html
deleted file mode 100644
index 0d92962112..0000000000
--- a/files/zh-cn/web/web_components/影子_dom/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: 影子DOM(Shadow DOM)
-slug: Web/Web_Components/影子_DOM
-tags:
- - DocumentFragment
- - React
- - Virtual DOM
- - Web Components
- - shadow dom
-translation_of: Web/Web_Components/Using_shadow_DOM
-translation_of_original: Web/Web_Components/Shadow_DOM
----
-<p>{{ draft }}</p>
-
-<p><strong>Shadow DOM </strong>为<a href="/zh-CN/docs/Web/Web_Components">Web组件</a>中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。你也可以在一个Web组件外部使用 Shadow DOM本身。</p>
-
-<p>为什么要把一些代码和网页上其他的代码分离?原因之一是,大型站点若CSS没有良好的组织,导航的样式可能就『泄露』到本不应该去的地方,如主要内容区域,反之亦然。随着站点、应用的拓展,这样的事难以避免。</p>
-
-<h2 id="Shadow_DOM基础">Shadow DOM基础</h2>
-
-<p>Shadow DOM 必须附加在一个元素上,可以是HTML文件中的一个元素,也可以是脚本中创建的元素;可以是原生的元素,如&lt;div&gt;、&lt;p&gt;;也可以是<a href="/en-US/docs/Web/Web_Components/Custom_Elements">自定义元素</a>如 <code>&lt;my-element&gt;。</code> 如下例所示,使用 {{domxref("Element.<code>attachShadow</code>()")}} 来附加影子DOM:</p>
-
-<pre class="brush: html">&lt;html&gt;
-  &lt;head&gt;&lt;/head&gt;
-  &lt;body&gt;
-    &lt;p id="hostElement"&gt;&lt;/p&gt;
-    &lt;script&gt;
-      // create shadow DOM on the &lt;p&gt; element above
-      var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>;
-    &lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>上例中给一个没有内容的 &lt;p&gt; 元素添加了影子DOM。显示没有变化。接下来,同样在上例中加入下列代码,可以在影子DOM中插入文字,并将在浏览器中显示:</p>
-
-<pre class="brush: js" style="font-size: 14px;">shadow.innerHTML = '&lt;p&gt;Here is some new text&lt;/p&gt;';</pre>
-
-<h3 id="Shadow_DOM_样式化">Shadow DOM 样式化</h3>
-
-<p><code>&lt;style&gt;</code> 元素可用来给影子DOM添加样式。 同样是上例,下列代码会将影子DOM中的文字变为红色:</p>
-
-<pre class="brush: html">&lt;script&gt;
-  // 创建 shadow DOM
-  var shadow = document.querySelector('#hostElement').<code>attachShadow({mode: 'open'})</code>;
-  // 给 shadow DOM 添加文字
-  shadow.innerHTML = '&lt;p&gt;Here is some new text&lt;/p&gt;';
-  // 添加CSS,将文字变红
-  shadow.innerHTML += '&lt;style&gt;p { color: red; }&lt;/style&gt;';
-&lt;/script&gt;
-</pre>
-
-<h3 id="Shadow_DOM_的组成部分:">Shadow DOM 的组成部分:</h3>
-
-<p>影子DOM由下列部分组成:</p>
-
-<ul>
- <li>{{domxref("Element.attachShadow()")}}</li>
- <li>{{domxref("Element.getDestinationInsertionPoints()")}}</li>
- <li>{{domxref("Element.shadowRoot")}}</li>
- <li><a href="/en-US/docs/Web/HTML/Element/Content">&lt;content&gt; 元素</a></li>
- <li><a href="/en-US/docs/Web/HTML/Element/Shadow">&lt;shadow&gt; 元素</a></li>
- <li>这些元素已从规范中移除: &lt;content&gt;, &lt;element&gt; 和&lt;decorator&gt;</li>
- <li>相关API接口:{{domxref("ShadowRoot")}}, {{domxref("HTMLTemplateElement")}} and {{domxref("HTMLSlotElement")}}</li>
- <li>CSS 选择器:
- <ul>
- <li>伪类:{{cssxref(":host")}}, {{cssxref(":host()")}}, {{cssxref(":host-context()")}}</li>
- <li>伪元素:{{cssxref("::shadow")}} and {{cssxref("::content")}}</li>
- <li>组合器:<code>&gt;&gt;&gt;</code> (formerly <code>/deep/</code>)*</li>
- </ul>
- </li>
-</ul>
-
-<p>* 将来<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=489954">子组合器有可能被弃用</a></p>
-
-<h2 id="Interfaces">Interfaces</h2>
-
-<p>{{domxref("ShadowRoot")}}</p>
-
-<p>DOM子树的根节点,和文档的主要DOM树分开渲染。</p>
-
-<p>{{domxref("HTMLTemplateElement")}}</p>
-
-<p>允许访问HTML元素的内容。</p>
-
-<p>{{domxref("HTMLSlotElement")}}</p>
-
-<p>定义一个槽的位置。</p>
-
-<p>{{domxref("DocumentOrShadowRoot")}}</p>
-
-<p>提供在文档和 Shadow 树之间共享的API。</p>