Shadow root-div in-Eingang

Ich habe gesehen, etwas seltsam heute. Schauen Sie sich die Bilder im Zusammenhang mit der post (unten). Ich habe ein input[type="text"]. Seine "1" auf dem Bildschirm Bild. Es ist css sieht so etwas wie, dass;

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

Nur eine gewöhnliche Eingabe, außer diesem einen keine Grenze.

Dann sah ich auf die dev-tools, und ich sah etwas, was ich nie zuvor gesehen habe. Die "#shadow-root" und ein div in einem Eingang.

Ich weiß, dass dev-tools fügt etwas von sich, um anzuzeigen Hinweise auf die ursprüngliche Webseite. Allerdings bin ich wirklich neugierig, warum es fügt ein div in ein input, und wie ist das eigentlich möglich, etwas Rendern, wie die auf der webkit-engine.

Chrome dev-tools sind irgendwie komisch Letzte Zeit, hatte ich einige Probleme mit ihm. Zum Beispiel verdoppelte sich der Stil.css-Datei und vergisst zu laden andere ein, was war die Ursache der schrecklichen Aussehen von jquery-Kalender (nur wenn geladen auf meinem browser).

Es ist wahrscheinlich kein bug, sondern ein feature, aber ich würde gerne mehr darüber wissen

Shadow root-div in-Eingang

Shadow root-div in-Eingang

InformationsquelleAutor sznowicki | 2013-02-11

  1. 9

    Ist die Shadow DOM.

    Klicken Sie einfach auf die Optionen und deaktivieren Sie die "Show Shadow DOM" Optionen..

    Den w3c-Entwurf können an gefunden werden https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html

    und in Bezug auf die Chrom sehen http://chemicaloliver.net/programming/inspecting-the-shadow-dom-in-google-chrome-inspector/

    Hi, irgendwie spät hier, aber ich habe ein Problem, wo die Shadow-DOM (#shadow-root) ist das hinzufügen von ein brechen der Linie am oberen Rand der Seite. Ich bereits deaktiviert das Shadow-DOM-option, irgendwelche Ideen?
    das shadow DOM diskutiert bezieht sich hier auf die Entwickler-tools nur. Woher wissen Sie, dass Ihr problem ist mit dem Shadow DOM und nicht die eigentliche HTML/CSS ?
    ich habe bereits lief mehrere Tests, es ist definitiv nur passiert in Chrome. Etwas Zugabe von 5 leere Zeilen nach <body>
    wenn Sie können es online irgendwo kann ich schauen.
    sicher, stackoverflow.com/questions/26110662/...

    InformationsquelleAutor Gabriele Petrioli

  2. 5

    Als Gaby Petrioli wies darauf hin, dies ist der Shadow DOM. Es entsteht durch die browser bieten eine Kapselung interface in HTML, für " third-party-Bibliotheken, et al.

    Kapselung ist ein OOP-Konzept, wobei Objekte einschränken können Zugriff auf Ihre eigenen Daten so, dass third-party-code nicht beliebig wischen Sie es heraus.

    HTML fehlt jegliche Kapselung-Funktionen, was vor allem ein problem für Drittanbieter-Bibliotheken (jQuery, twitter buttons usw). Shadow-DOM erfunden wurde für funktionale Kapselung für die verschiedenen Teilkomponenten der DOM. Dies wird erreicht, indem die funktionale Teilbäume getrennt von dem Dokument-Baum (und jeder andere). Diese Trennung von shadow-DOM-Teilbaum ist bekannt als die Schatten-Grenze. CSS-Regeln und DOM-Abfragen nicht über die Schatten-Grenze, und damit die Kapselung.(1)

    Als Dominic Cooney: , Hier ist ein fundamentales problem, dass widgets gebaut in HTML und JavaScript schwer zu bedienen: Der DOM-Baum innerhalb eines widgets ist nicht gekapselt vom rest der Seite. Diese fehlende Kapselung bedeutet, dass Ihr Dokument stylesheet versehentlich angewendet, um Teile im inneren des widget; JavaScript versehentlich ändern Sie Teile im inneren des widget; Ihre IDs können sich überschneiden mit IDs innerhalb des widget; und so weiter.(2)

    Weiter Lesen:

    Grundlegende einführende Beschreibung des Shadow DOM

    (1) Eine vollständige technische Beschreibung - der zweite Teil dieses Artikels wird erläutert, wie die Shadow-DOM selbst

    (2) Dominic Cooney Artikel: Shadow-DOM-101

    Shadow-DOM - W3C Working Draft 17 Juni 2014

    InformationsquelleAutor gibberish

Schreibe einen Kommentar