files/ja/web/api/shadowroot/innerhtml/index.html


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

---
title: ShadowRoot.innerHTML
slug: Web/API/ShadowRoot/innerHTML
tags:
  - API
  - Property
  - Reference
  - ShadowRoot
  - innerHTML
  - shadow dom
  - プロパティ
translation_of: Web/API/ShadowRoot/innerHTML
---
<div>{{APIRef("Shadow DOM")}}</div>

<p><strong><code>innerHTML</code></strong> は {{domxref("ShadowRoot")}} インターフェイスのプロパティで、 <code>ShadowRoot</code> の内部の DOM ツリーに対する参照を設定したり返したりします。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox">var <em>domString</em> = <em>shadowRoot</em>.innerHTML
<em>shadowRoot</em>.innerHTML = <em>domString</em>
</pre>

<h3 id="Value" name="Value">値</h3>

<p>{{domxref("DOMString")}} です。</p>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: js">let customElem = document.querySelector('my-shadow-dom-element');
let shadow = customElem.shadowRoot;

shadow.innerHTML = '&lt;strong&gt;This element should be more important!&lt;/strong&gt;';</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<p>このプロパティはまだどの仕様書でも定義されていません。定義には <a href="https://github.com/w3c/DOM-Parsing/issues/21">この仕様書の問題</a>を参照してください。</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("api.ShadowRoot.innerHTML")}}</p>