From 65a1d489030384304380e79775d8be972eb317f5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 19 Jan 2022 00:02:40 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/shadowroot/index.md | 117 +++++++++++++-------------- 1 file changed, 55 insertions(+), 62 deletions(-) (limited to 'files/ja/web/api/element') diff --git a/files/ja/web/api/element/shadowroot/index.md b/files/ja/web/api/element/shadowroot/index.md index 148410966c..490df2e344 100644 --- a/files/ja/web/api/element/shadowroot/index.md +++ b/files/ja/web/api/element/shadowroot/index.md @@ -2,32 +2,39 @@ title: Element.shadowRoot slug: Web/API/Element/shadowRoot tags: + - API + - Element - プロパティ - リファレンス - - 要素 - - 試験的 + - ShadowRoot + - シャドウ DOM +browser-compat: api.Element.shadowRoot translation_of: Web/API/Element/shadowRoot --- -

{{APIRef('Shadow DOM')}} {{SeeCompatTable}}{{draft}}

+{{APIRef("Shadow DOM")}} -

読み取り専用のプロパティであるElement.shadowRootは、そのエレメントによってホストされたshadow rootへの読み取りアクセスを提供します。既に存在している要素にshadow rootを追加する場合は {{domxref('Element.attachShadow')}} を使用してください。

+`Element.shadowRoot` は読み取り専用のプロパティで、その要素がホストになっているシャドウルートを表します。 -

文法

+既に存在している要素にシャドウルートを追加するには {{DOMxRef("Element.attachShadow()")}} を使用してください。 -
var shadowroot = element.shadowRoot;
-
+## 構文 -

値

+```js +var shadowroot = element.shadowRoot; +``` -

{{domxref('ShadowRoot')}} オブジェクトです。 アタッチされた時の{{DOMxRef("ShadowRoot.mode", "mode")}} に closed が指定された場合には  null となります。

+### 値 -

Examples

+{{DOMxRef("ShadowRoot")}} オブジェクトインスタンス、またはシャドウルートが {{DOMxRef("ShadowRoot.mode", "mode")}} に `closed` を設定されて取り付けられた場合は `null` です（詳しくは {{DOMxRef("Element.attachShadow()")}} を参照してください）。 -

The following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.

+## 例 -

Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.

+次のスニペットは [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks) の例から取ったものです ([ライブで確認](https://mdn.github.io/web-components-examples/life-cycle-callbacks))。その要素の属性で指定された大きさと色の正方形を表示する要素を生成します。 -
connectedCallback() {
+`` 要素のクラス定義の中に、外部関数である `updateStyle()` を呼び出すライフサイクルコールバックをいくつか入れて、実際にサイズと色を要素に適用しています。引数として `this` （カスタム要素そのもの）を渡していることが分かるでしょう。
+
+```js
+connectedCallback() {
   console.log('Custom square element added to page.');
   updateStyle(this);
 }
@@ -35,52 +42,38 @@ translation_of: Web/API/Element/shadowRoot
 attributeChangedCallback(name, oldValue, newValue) {
   console.log('Custom square element attributes changed.');
   updateStyle(this);
-}
- -

In the updateStyle() function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:

- -
function updateStyle(elem) {
-  const shadow = elem.shadowRoot;
-  const childNodes = Array.from(shadow.childNodes);
-
-  childNodes.forEach(childNode => {
-    if (childNode.nodeName === 'STYLE') {
-      childNode.textContent = `
-        div {
-          width: ${elem.getAttribute('l')}px;
-          height: ${elem.getAttribute('l')}px;
-          background-color: ${elem.getAttribute('c')};
-        }
-      `;
-    }
-  });
-}
- -

仕様

- - - - - - - - - - - - - - -
仕様状態注脚
{{SpecName('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}}{{Spec2('DOM WHATWG')}}
- -

ブラウザ互換性

- - - -

{{Compat("api.Element.shadowRoot")}}

- -

関連情報

- - +} +``` + +`updateStyle()` 関数自体で、{{domxref("Element.shadowRoot")}} を使用してシャドウ DOM への参照を取得します。ここから標準的な DOM 走査技術を使用して、シャドウ DOM 内の {{htmlelement("style")}} 要素を見つけ、その中にある CSS を更新します。 + +```js +function updateStyle(elem) { +  const shadow = elem.shadowRoot; +  const childNodes = Array.from(shadow.childNodes); + +  childNodes.forEach(childNode => { +    if (childNode.nodeName === 'STYLE') { +      childNode.textContent = ` +        div { +          width: ${elem.getAttribute('l')}px; +          height: ${elem.getAttribute('l')}px; +          background-color: ${elem.getAttribute('c')}; +        } +      `; +    } +  }); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{DOMxRef("Element.openOrClosedShadowRoot")}} {{non-standard_inline}} -- cgit v1.2.3-54-g00ecf