Ist es möglich, den Zugriff auf die Shadow-DOM-Elemente, die über die übergeordnete Dokument?

Diese Frage ist mehr richtet sich an user-erstellten shadow-DOM-Elemente, aber für die Erreichbarkeit, werde ich das date Eingabe-Typ für diese Frage:

Sagen, ich habe zum Beispiel eine date input auf meiner Seite. Mit ein paar Stückchen herausgeschnitten, die shadow-DOM-markup für dieses (mit Chrome) sieht etwas aus wie:

<input type="date">
    #document-fragment
        <div pseudo="-webkit-datetime-edit">
            <div pseudo="-webkit-datetime-edit-fields-wrapper">
                <span role="spinbutton">dd</span>
                <div pseudo="-webkit-datetime-edit-text">/</div>
                <span role="spinbutton">mm</span>
                <div pseudo="-webkit-datetime-edit-text">/</div>
                <span role="spinbutton">yyyy</span>
            </div>
        </div>
        <div></div>
        <div pseudo="-webkit-calendar-picker-indicator"></div>

Methoden und Eigenschaften im Zusammenhang mit der date Eingang nicht zu verweisen scheinen die shadow-DOM (JSFiddle), so Frage ich mich, wie (wenn überhaupt) kann diese shadow-DOM-Elemente zugegriffen werden?

InformationsquelleAutor der Frage James Donnelly | 2013-05-19

  1. 18

    int32_t ist Recht, Shadow DOM, durch definition, ist ein Weg zu füllen ein Knoten mit DOM, die Sie ausblenden möchten, aus externen Quellen (Kapselung). Der Punkt ist, dass Sie als Komponente Autor erhalten zu wählen, genau, welche Teile ausgesetzt sein werden, außerhalb CSS oder JavaScript sind und welche nicht.

    Leider, Sie können nicht erstellen Sie einen öffentlichen JavaScript-Schnittstelle zur Shadow DOM, ohne mit einem anderen bleeding-edge-spec genannt Benutzerdefinierte Elemente. Wenn Sie sich entscheiden, es zu tun, ist so einfach wie das hinzufügen von benutzerdefinierten öffentliche Methoden, um das element dem Prototyp. Aus diesen können Sie den Zugriff auf die Interna von Ihrem Shadow-DOM (siehe das Dritte Beispiel hier).

    Können Sie, allerdings, setzen Sie die Haken für die CSS, um den Zugriff auf die Interna von Ihrem Shadow DOM ohne Verwendung von Benutzerdefinierten Elementen. Es gibt zwei Möglichkeiten, das zu tun:

    1. Pseudo-Elemente
    2. CSS-Variablen

    Pseudo-Elemente

    Chrome und Firefox setzen bestimmte Teile des Shadow DOM zu CSS durch spezielle pseudo-Elemente. Hier deinem Beispiel der date Eingang mit dem Zusatz von einer CSS-Regel, die gilt nur der numerische Teil des Feldes Datum durch die Verwendung des Chrome-sofern -webkit-datetime-edit pseudo-element.

    Hier eine unvollständige Liste der verfügbaren WebKit-pseudo-Elemente. Sie können auch aktivieren Sie einfach die Show Shadow DOM option " DevTools und suchen Sie Attribute benannt pseudo.

    Komponente Autoren können auch Ihre eigenen pseudo-Elementen aussetzen, Teile Ihrer Schatten-DOM (siehe das 2. Beispiel hier).

    CSS-Variablen

    Eine noch bessere Möglichkeit ist die Verwendung von CSS-Variablen, die Sie aktivieren können mit Enable experimental WebKit features im about:flags in Chrom. Dann schauen Sie sich diese Geigedie mit CSS-Variablen für die Kommunikation mit dem Shadow DOM, welche Farbe er verwenden soll für seine "Thema".

    InformationsquelleAutor der Antwort CletusW

  2. 4

    Können Sie nicht auf Inhalte zugreifen, die der Shadow-DOM-Skripts außerhalb des Shadow DOM. Kapselung ist der Zweck von Shadow-DOM.

    InformationsquelleAutor der Antwort int32_t

Schreibe einen Kommentar