2013-02-11 11 views
13

私は今日何か変わったことを見ました。投稿に関連する写真を見てください(下記)。私は入力[タイプ= "テキスト"]を作った。画面上の "1"です。それは、CSSのようなものです。入力内のシャドウルートdiv

table tbody input { 
    width: 40px; 
    border: none; 
    height: 16px; 
} 

普通の入力に加えて、これには境界線がありません。

次に、私はdev-toolsを見て、今まで見たことのないものを見ました。 "#shadow-root"と入力内のdiv。

私が知っているdev-toolsは、元のWebページにヒントを表示するために何かを追加しています。しかし、私は本当にそれが入力内にdivを追加するのは本当に好奇心で、Webkitエンジン上でdivをレンダリングするのは実際に可能です。

前回はChrome dev-toolsが何とか変わっていましたが、いくつか問題がありました。たとえば、style.cssファイルを2倍にして、別のものをロードすることを忘れて、jqueryカレンダーの恐ろしい外観の原因が(ブラウザにロードされたときのみ)。

これはおそらくバグではないですが、機能が、私はそれ

Input visible in browser (it's not straight, adhoc screen)

This input visible from the dev-tools side

答えて

9

についての詳細を知るのが大好きですシャドウDOMであること。

ただ、 "ショーシャドウDOM" オプション..

W3C草案はhttps://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html

で見つけるとChromeに関してはhttp://chemicaloliver.net/programming/inspecting-the-shadow-dom-in-google-chrome-inspector/

+0

種類の後期こここんにちは、私はどこの問題を抱えていますShadow DOM(#shadow-root)がbreを追加していますページの上部に行を付ける。私はすでにShadow DOMオプションを無効にしていました。 – andufo

+0

@andufoここで説明する影DOMは、開発者ツールのみを指します。あなたの問題が実際のHTML/CSSではなく、影のDOMであることをどうやって知っていますか? –

+0

@ gaby-aka-g-petrioli私は既にいくつかの小切手を走らせていましたが、それは間違いなくChromeでのみ起こっています。あなたがどこかにオンラインで置くことができる場合、何かが空白行を追加しています。 – andufo

5
を見ることができますをオプションでクリックして無効にします

Gaby Petrioliが指摘しているように、これはShadow DOMです。サードパーティのライブラリなどのために、HTMLでカプセル化インターフェイスを提供するためにブラウザによって作成されます。

カプセル化は、オブジェクトが独自のデータへのアクセスを制限して、第三者コードが任意に抹消できないOOPの概念です。

HTMLには、サードパーティのライブラリ(jQuery、twitterボタンなど)で特に問題となる、カプセル化機能がありません。 DOMのさまざまなサブツリーに機能的なカプセル化を提供するために、Shadow DOMがを発明しました。これは、機能的なサブツリーをドキュメントツリー(および互い)から隔離しておくことによって達成されます。このシャドウDOMサブツリーの分離は、シャドウ境界として知られている。 CSSルールとDOMのクエリは、影の境界を越えるため、カプセル化を提供していない(1)

ドミニククーニーはそれを置くとして:。ここではハードにHTMLとJavaScriptの外に構築されたウィジェットを作る根本的な問題であり、使用:ウィジェット内のDOMツリーは、ページの残りからカプセル化されません。このカプセル化の欠如は、ドキュメントスタイルシートが誤ってウィジェット内の部品に適用される可能性があることを意味します。 JavaScriptが誤ってウィジェット内の部品を変更する可能性があります。 IDがウィジェット内のIDと重複する可能性があります。等々。(2)

参考資料:

Basic introductory description of the Shadow DOM

(1) A more complete technical description - the second part of this article explains how to use the Shadow DOM yourself

(2) Dominic Cooney's article: Shadow DOM 101

Shadow DOM - W3C Working Draft 17 June 2014

関連する問題