blob: 21f0f196cda7ab86b88a1a86b2e09486792132d3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: <content>
slug: Web/HTML/Element/content
translation_of: Web/HTML/Element/content
---
<p>{{Deprecated_header}}</p>
<p><strong>HTML <code><content></code> 元素</strong>— <a href="/en-US/docs/Web/Web_Components">Web 组件</a> 的技术套件的废弃部分 — 用于 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> 内部作为 {{glossary("insertion point")}}，并且不可用于任何正常的 HTML，现在已被 {{HTMLElement("slot")}} 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。 </p>
<div class="note">
<p><strong>注</strong>：虽然在规范的草案中出现，并且在多个浏览器中实现，这个元素依然会在规范的之后版本中移除。</p>
</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">透明内容</a></td>
</tr>
<tr>
<th scope="row">允许的内容</th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a></td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">允许的父元素</th>
<td>任何接受流式内容的元素</td>
</tr>
<tr>
<th scope="row">DOM 接口</th>
<td>{{domxref("HTMLContentElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>这个元素包含 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p>
<dl>
<dt><code>select</code></dt>
<dd>逗号分隔的选择器列表，它们和 CSS 选择器语法相同。它们选择要插入的内容，来替换为 <code><content> </code>元素。</dd>
</dl>
<h2 id="示例">示例</h2>
<p>这里是一个使用 <code><content></code> 元素的简单示例。它是个 HTML 文件，包含所有所需的东西。</p>
<div class="note">
<p><strong>注</strong>：为了使这个代码有效，你使用的浏览器必须支持 Web 组件，请见 <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>。</p>
</div>
<pre class="brush: html"><html>
<head></head>
<body>
<!-- The original content accessed by <content> -->
<div>
<h4>My Content Heading</h4>
<p>My content text</p>
</div>
<script>
// Get the <div> above.
var myContent = document.querySelector('div');
// Create a shadow DOM on the <div>
var shadowroot = myContent.createShadowRoot();
// Insert into the shadow DOM a new heading and
// part of the original content: the <p> tag.
shadowroot.innerHTML =
'<h2>Inserted Heading</h2> <content select="p"></content>';
</script>
</body>
</html>
</pre>
<p>如果你在 Web 浏览器中展示，它应该是这样。</p>
<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p>
<h2 id="规范">规范</h2>
<table class="spec-table standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Shadow DOM', "#the-content-element", "content")}}</td>
<td>{{Spec2('Shadow DOM')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>35</td>
<td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
<td>{{CompatNo}}</td>
<td>26</td>
<td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>37</td>
<td>{{CompatGeckoMobile("28")}} [1]</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] 如果 Shadow DOM 在 Firefox 中没有开启， <code><content> </code>元素会表现为<code> </code>domxref("HTMLUnknownElement")}}。Shadow DOM 首先在 Firefox 33 中实现，并且在首选项 <code>dom.webcomponents.enabled </code>背后，它默认是关闭的。</p>
<h2 id="See_also" name="See_also">另见</h2>
<ul>
<li><a href="/en-US/docs/Web/Web_Components">Web 组件</a></li>
<li>{{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li>
</ul>
<div>{{HTMLRef}}</div>
|
