From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/shadowroot/delegatesfocus/index.html | 50 +++++++++ files/ja/web/api/shadowroot/index.html | 113 +++++++++++++++++++++ files/ja/web/api/shadowroot/innerhtml/index.html | 43 ++++++++ 3 files changed, 206 insertions(+) create mode 100644 files/ja/web/api/shadowroot/delegatesfocus/index.html create mode 100644 files/ja/web/api/shadowroot/index.html create mode 100644 files/ja/web/api/shadowroot/innerhtml/index.html (limited to 'files/ja/web/api/shadowroot') diff --git a/files/ja/web/api/shadowroot/delegatesfocus/index.html b/files/ja/web/api/shadowroot/delegatesfocus/index.html new file mode 100644 index 0000000000..4250313ada --- /dev/null +++ b/files/ja/web/api/shadowroot/delegatesfocus/index.html @@ -0,0 +1,50 @@ +--- +title: ShadowRoot.delegatesFocus +slug: Web/API/ShadowRoot/delegatesFocus +tags: + - API + - Non-standard + - Property + - Read-only + - Reference + - ShadowRoot + - Web Components + - delegatesFocus + - shadow dom + - プロパティ + - 読み取り専用 +translation_of: Web/API/ShadowRoot/delegatesFocus +--- +
{{APIRef("Shadow DOM")}}
+ +

delegatesFocus は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、シャドウが割り当てられたときに delegatesFocus が設定されていたかどうかを示す真偽値を返します ({{domxref("Element.attachShadow()")}} を参照)。

+ +

これは現在のところ試験的な標準外の機能であり、 Chrome のみで使用可能です。

+ +

構文

+ +
var df = shadowRoot.delegatesFocus
+ +

値

+ +

真偽値 — シャドウルートがフォーカスを転送するのであれば true、そうでなければ false。

+ +

例

+ +
let customElem = document.querySelector('my-shadow-dom-element');
+let shadow = customElem.shadowRoot;
+
+  ...
+
+// Does it delegate focus?
+let hostElem = shadow.delegatesFocus;
+ +

仕様書

+ +

この機能は現在のところ、仕様書で定義されていません。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.ShadowRoot.delegatesFocus")}}

diff --git a/files/ja/web/api/shadowroot/index.html b/files/ja/web/api/shadowroot/index.html new file mode 100644 index 0000000000..1b8b31ab12 --- /dev/null +++ b/files/ja/web/api/shadowroot/index.html @@ -0,0 +1,113 @@ +--- +title: ShadowRoot +slug: Web/API/ShadowRoot +tags: + - API + - Interface + - Reference + - ShadowRoot + - Web Components + - shadow dom + - インターフェイス +translation_of: Web/API/ShadowRoot +--- +
{{APIRef('Shadow DOM')}}
+ +

ShadowRoot インターフェイスは Shadow DOM API の1つで、文書の DOM ツリーから分離してレンダリングされた部分木の根ノードを指します。

+ +

shadow ツリーが mode オプションを open に指定して {{domxref("Element.attachShadow()")}} から作られた場合、shadow root への参照は {{domxref("Element.shadowRoot")}} プロパティによって読み出すことが出来ます。

+ +

プロパティ

+ +
+
{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}
+
シャドウが添付されたときに delegatesFocus が設定されていたかどうかを示す真偽値を返します ({{domxref("Element.attachShadow()")}} を参照)。
+
{{domxref("ShadowRoot.host")}} {{readonlyinline}}
+
ShadowRoot が追加された DOM 要素への参照を返します。
+
{{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}
+
ShadowRoot の内部ツリーへの参照を設定する、または受け取ることが出来ます。
+
{{domxref("ShadowRoot.mode")}} {{readonlyinline}}
+
ShadowRoot のモードで open または closed の値を取ります。これはシャドウルートの内部の機能に JavaScript からアクセスできるかどうかを定義します。
+
+ +

DocumentOrShadowRoot 由来のプロパティ

+ +

ShadowRoot インターフェイスは {{domxref("DocumentOrShadowRoot")}} で定義された以下のプロパティを含みます。これは Chrome ブラウザーのみ実装されており、他のブラウザーでは依然 {{domxref("Document")}} インターフェイスで実装されています。

+ +
+
{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
+
shadow ツリーの範囲内で、フォーカスされている {{domxref('Element')}} を返します。
+
{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
+
文書に明示的にリンクされている、または埋め込まれている{{domxref('CSSStyleSheet')}} オブジェクトの {{domxref('StyleSheetList')}} を返します。
+
+ +

メソッド

+ +

ShadowRoot インターフェイスは {{domxref("DocumentOrShadowRoot")}} で定義された以下のプロパティを含みます。これは Chrome ブラウザーのみ実装されており、他のブラウザーでは依然 {{domxref("Document")}} インターフェイスで実装されています。

+ +
+
{{domxref("DocumentOrShadowRoot.getSelection()")}}
+
ユーザーによって選択されたテキストの範囲または現在のキャレットの位置を表現する {{domxref('Selection')}} オブジェクトを返します。
+
{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
+
指定された座標における最上位の要素を返します。
+
{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
+
指定された座標における全要素からなる配列を返します。
+
{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
+
キャレットを含む DOM ノードとキャレットのオフセットを含む {{domxref('CaretPosition')}} オブジェクトを返します。
+
+ +

例

+ +

以下のコードは、サイズと色の属性が指定された四角形の要素を作る life-cycle-callbacks の例です。 (実行例)

+ +

<custom-square> 要素のクラス定義の中に、外部関数である updateStyle を呼び出す life-cycle-callbacks が含まれています。updateStyle は要素のサイズと色を適用しています。this (カスタム要素自身) をパラメータとして関数に渡していることが分かるでしょう。

+ +
connectedCallback() {
+  console.log('四角形のカスタム要素がページに追加されました。');
+  updateStyle(this);
+}
+
+attributeChangedCallback(name, oldValue, newValue) {
+  console.log('四角形のカスタム要素の属性が変更されました。');
+  updateStyle(this);
+}
+ +

updateStyle 関数の中では、{{domxref("Element.shadowRoot")}} を利用して shadow DOM への参照を取得しています。shadow DOM 内では、標準的な DOM の探索手法を用いて {{htmlelement("style")}} を探し、CSS を更新しています。

+ +
function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i < childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent = 'div {' +
+                          ' width: ' + elem.getAttribute('l') + 'px;' +
+                          ' height: ' + elem.getAttribute('l') + 'px;' +
+                          ' background-color: ' + elem.getAttribute('c');
+    }
+  }
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}{{Spec2('DOM WHATWG')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.ShadowRoot")}}

diff --git a/files/ja/web/api/shadowroot/innerhtml/index.html b/files/ja/web/api/shadowroot/innerhtml/index.html new file mode 100644 index 0000000000..48e7101118 --- /dev/null +++ b/files/ja/web/api/shadowroot/innerhtml/index.html @@ -0,0 +1,43 @@ +--- +title: ShadowRoot.innerHTML +slug: Web/API/ShadowRoot/innerHTML +tags: + - API + - Property + - Reference + - ShadowRoot + - innerHTML + - shadow dom + - プロパティ +translation_of: Web/API/ShadowRoot/innerHTML +--- +
{{APIRef("Shadow DOM")}}
+ +

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

+ +

構文

+ +
var domString = shadowRoot.innerHTML
+shadowRoot.innerHTML = domString
+
+ +

値

+ +

{{domxref("DOMString")}} です。

+ +

例

+ +
let customElem = document.querySelector('my-shadow-dom-element');
+let shadow = customElem.shadowRoot;
+
+shadow.innerHTML = '<strong>This element should be more important!</strong>';
+ +

仕様書

+ +

このプロパティはまだどの仕様書でも定義されていません。定義には この仕様書の問題を参照してください。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ShadowRoot.innerHTML")}}

-- cgit v1.2.3-54-g00ecf