Summary
The HTML <content>
element is used inside of Shadow DOM as an {{glossary("insertion point")}}. It is not intended to be used in ordinary HTML. It is used with Web Components.
- Content categories Transparent content.
- Permitted content Flow content.
- Tag omission {{no_tag_omission}}
- Permitted parent elementsAny element that accepts flow content.
- DOM interface {{domxref("HTMLContentElement")}}
Attributes
This element includes the global attributes.
- select
- A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the
<content>
element.
Example
Here is a simple example of using the <content>
element. It is an HTML file with everything needed in it.
Note: For this code to work, the browser you display it in must support Web Components. See 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>
If you display this in a web browser it should look like the following.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Shadow DOM', "#the-content-element", "content")}} | {{Spec2('Shadow DOM')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 35 | {{CompatGeckoDesktop("28")}} [1] | {{CompatNo}} | 26 | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 37 | {{CompatGeckoMobile("28")}} [1] | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] If Shadow DOM is not enabled in Firefox, <content>
elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 33 and is behind a preference, dom.webcomponents.enabled
, which is disabled by default.
See also
- Web Components
- {{HTMLElement("shadow")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}