From 035535ba507b9e36b058bd9843242e1bcbda1be3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jan 2022 21:57:08 +0900 Subject: ウェブコンポーネント関係の Web API の記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/shadowroot/index.html | 86 -------------------------- files/ja/web/api/element/shadowroot/index.md | 86 ++++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 86 deletions(-) delete mode 100644 files/ja/web/api/element/shadowroot/index.html create mode 100644 files/ja/web/api/element/shadowroot/index.md (limited to 'files/ja/web/api/element/shadowroot') diff --git a/files/ja/web/api/element/shadowroot/index.html b/files/ja/web/api/element/shadowroot/index.html deleted file mode 100644 index 148410966c..0000000000 --- a/files/ja/web/api/element/shadowroot/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Element.shadowRoot -slug: Web/API/Element/shadowRoot -tags: - - プロパティ - - リファレンス - - 要素 - - 試験的 -translation_of: Web/API/Element/shadowRoot ---- -

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

- -

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

- -

文法

- -
var shadowroot = element.shadowRoot;
-
- -

値

- -

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

- -

Examples

- -

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.

- -
connectedCallback() {
-  console.log('Custom square element added to page.');
-  updateStyle(this);
-}
-
-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")}}

- -

関連情報

- - diff --git a/files/ja/web/api/element/shadowroot/index.md b/files/ja/web/api/element/shadowroot/index.md new file mode 100644 index 0000000000..148410966c --- /dev/null +++ b/files/ja/web/api/element/shadowroot/index.md @@ -0,0 +1,86 @@ +--- +title: Element.shadowRoot +slug: Web/API/Element/shadowRoot +tags: + - プロパティ + - リファレンス + - 要素 + - 試験的 +translation_of: Web/API/Element/shadowRoot +--- +

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

+ +

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

+ +

文法

+ +
var shadowroot = element.shadowRoot;
+
+ +

値

+ +

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

+ +

Examples

+ +

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.

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+
+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")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf