13

今日、何か奇妙なものを見ました。投稿に関連する写真を見てください（下）。input [type="text"]を作成しました。画面画像の「1」です。cssはそのように見えます。

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

通常の入力ですが、これ以外に境界線はありません。

次に、dev-toolsを見て、今まで見たことのないものを見ました。「＃shadow-root」と入力内のdiv。

dev-toolsは、元のWebページにヒントを表示するために独自に何かを追加することを知っています。しかし、なぜそれが入力内にdivを追加するのか、そしてそれが実際にWebkitエンジンでそのようなものをレンダリングすることがどのように可能であるのか本当に興味があります。

Chromeの開発ツールは前回どういうわけか奇妙でした、私はそれにいくつかの問題がありました。たとえば、style.cssファイルが2倍になり、jqueryカレンダーの見栄えが悪い原因である別のファイルをロードするのを忘れています（ブラウザーにロードした場合のみ）。

おそらくバグではなく機能ですが、もっと知りたいです

ブラウザに表示される入力（まっすぐなアドホック画面ではありません）

この入力は開発ツール側から見ることができます

4

2 に答える 2

9

それがShadow DOMです。

オプションをクリックして、「Show Shadow 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/を参照してください。

于 2013-02-11T19:29:02.993 に答える
5

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

カプセル化は、オブジェクトが自身のデータへのアクセスを制限できる OOP の概念であり、サードパーティのコードが恣意的に消去できないようにします。

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

Dominic Cooney が述べたように:ここに、HTML と JavaScript から構築されたウィジェットを使いにくくする基本的な問題があります: ウィジェット内の DOM ツリーは、ページの残りの部分からカプセル化されていません。このカプセル化の欠如は、ドキュメント スタイルシートが誤ってウィジェット内のパーツに適用される可能性があることを意味します。JavaScript が誤ってウィジェット内のパーツを変更する可能性があります。ID はウィジェット内の ID と重複する場合があります。(2)

参考文献：

Shadow DOM の基本的な紹介

(1) より完全な技術的説明- この記事の第 2 部では、Shadow DOM を自分で使用する方法について説明します。

(2) Dominic Cooney の記事: Shadow DOM 101

Shadow DOM - W3C ワーキング ドラフト 2014 年 6 月 17 日

于 2014-10-20T17:06:14.150 に答える