?
This document uses PHP Chinese website manual Release
已廢棄
該特性已經(jīng)從 Web 標(biāo)準(zhǔn)中刪除，雖然一些瀏覽器目前仍然支持它，但也許會(huì)在未來(lái)的某個(gè)時(shí)間停止支持，請(qǐng)盡量不要使用該特性。
HTML<content> 元素— Web 組件 的技術(shù)套件的廢棄部分 — 用于 Shadow DOM 內(nèi)部作為 insertion point，并且不可用于任何正常的 HTML，現(xiàn)在已被<slot>元素代替，它在 DOM 中創(chuàng)建一個(gè)位置，Shadow DOM 會(huì)插入這里。
注：雖然在規(guī)范的草案中出現(xiàn)，并且在多個(gè)瀏覽器中實(shí)現(xiàn)，這個(gè)元素依然會(huì)在規(guī)范的之后版本中移除。
內(nèi)容類(lèi)別 | 透明的內(nèi)容。 |
|---|---|
允許的內(nèi)容 | 流量?jī)?nèi)容。 |
標(biāo)記遺漏 | 沒(méi)有，起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許的父元素 | 任何接受流內(nèi)容的元素。 |
DOM界面 | HTMLContentElement |
屬性
這個(gè)元素包含 全局屬性。
select逗號(hào)分隔的選擇器列表，它們和 CSS 選擇器語(yǔ)法相同。它們選擇要插入的內(nèi)容，來(lái)替換為 <content> 元素。
示例
這里是一個(gè)使用<content>元素的簡(jiǎn)單示例。它是個(gè) HTML 文件，包含所有所需的東西。
注：為了使這個(gè)代碼有效，你使用的瀏覽器必須支持 Web 組件，請(qǐng)見(jiàn) Enabling Web Components in Firefox。
<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>如果你在 Web 瀏覽器中展示，它應(yīng)該是這樣。
規(guī)范
這個(gè)元素不再被任何規(guī)范定義。
瀏覽器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | 35 | No | 331 | No | 26 | No |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | 37 | 37 | No | 331 | No | ? | No |