현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
개요
The HTML <content> element is used inside of Shadow DOM as an insertion point. It is not intended to be used in ordinary HTML. It is used with Web Components.
- 콘텐츠 카테고리 Transparent content
- 허용되는 콘텐츠 Flow content
- 태그 생략 None, both the starting and ending tag are mandatory.
- 허용되는 부모 요소들Any element that accepts flow content
- DOM 인터페이스
HTMLContentElement
속성
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.
예제
Here is a simple example of using the <content> element. It is an HTML file with everything needed in it.
참고: 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.
사양
| Specification | Status | Comment |
|---|---|---|
| Shadow DOM The definition of 'content' in that specification. |
Working Draft |
브라우저 호환성
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 35 | 28 (28) [1] | Not supported | 26 | Not supported |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 37 | 28.0 (28) [1] | Not supported | ? | ? |
[1] If Shadow DOM is not enabled in Firefox, <content> elements will behave like HTMLUnknownElement. Shadow DOM was first implemented in Firefox 33 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.