Est-il possible d'accéder à l'Ombre des éléments du DOM à travers le document parent?

Cette question est plus destiné à l'utilisateur créé à l'ombre des éléments du DOM, mais pour l'accessibilité, je vais utiliser l' date type d'entrée pour cette question:

Dire par exemple j'ai un date des commentaires sur ma page. Avec un couple de bits édité, le shadow DOM balisage pour cela (à l'aide de Chrome) ressemble à quelque chose comme:

<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>

Les méthodes et les propriétés associées à la date d'entrée ne semble pas faire référence à l'ombre DOM à tous (JSFiddle), donc je me demandais comment (le cas échéant) peut-il l'ombre d'éléments DOM y accéder?

  • Votre question est de savoir comment accéder aux éléments du DOM au sein du shadow DOM? Aussi votre JSFiddle est incomplète.
  • Non, comment accéder à l'ombre des éléments du DOM à travers le shadow DOM du document parent. <script>/*Access here*/</script><input type="date" <!-- shadow DOM --> />. Incomplète?
InformationsquelleAutor James Donnelly | 2013-05-19
  1. 18

    int32_t est juste que Shadow DOM, par définition, est un moyen de combler un nœud avec DOM que vous souhaitez masquer à partir de sources externes (L'Encapsulation). Le point est que vous comme l'auteur de composant de choisir exactement quelles parties seront exposés à l'extérieur de CSS ou de JavaScript et qui ne le seront pas.

    Malheureusement, vous ne pouvez pas créer un public JavaScript interface de votre Ombre DOM sans l'aide d'un autre saignement-bord spec appelé Les Éléments Personnalisés. Si vous choisissez de le faire, c'est aussi simple que l'ajout de méthodes publiques de votre élément de prototype. À partir de ces vous pouvez accéder à l'intérieur de votre Ombre DOM (voir le troisième exemple ici).

    Vous pouvez, cependant, exposer les crochets pour les CSS pour accéder à l'intérieur de votre Ombre DOM sans l'aide des Éléments Personnalisés. Il y a deux façons de le faire:

    1. Pseudo-éléments
    2. CSS Variables

    Pseudo-éléments

    Chrome et Firefox exposer certaines parties de leur Ombre DOM CSS grâce à des pseudo-éléments. Voici votre exemple de la date de saisie avec l'ajout d'une règle CSS qui s'applique uniquement à la partie numérique de la zone de la date grâce à l'utilisation de google Chrome-fourni -webkit-datetime-edit pseudo-élément.

    Voici une liste partielle des WebKit pseudo-éléments. Vous pouvez aussi activer le Show Shadow DOM option dans DevTools et de regarder pour les attributs nommés pseudo.

    Composant les auteurs peuvent également créer leur propre pseudo-éléments à exposer les parties de leur Ombre DOM (voir le 2ème exemple ici).

    CSS Variables

    Une meilleure façon de le faire est d'utiliser CSS Variables, que vous pouvez activer avec Enable experimental WebKit features dans about:flags dans google Chrome. Alors découvrez ce violon qui utilise CSS Variables de communiquer à l'Ombre DOM de quelle couleur il doit utiliser pour son thème"."

    • Il est logique que vous ne devriez pas être en mesure d'accéder à l'Ombre DOM de Javascript sans quelques astuces. Mais est-il un moyen d'exécuter du Javascript dans il à tous?
    • Je ne suis pas la meilleure personne à qui demander aussi loin que la vanille Shadow DOM va, mais vous pouvez certainement lorsque vous êtes en utilisant des Éléments Personnalisés. Découvrez Polymère, par exemple.
    • Une mise à jour de violon de celle prévue ci-dessus: jsfiddle.net/r3httdhs
    • J'aime cette réponse... cependant, avait une question commentaire à propos de la dernière partie qui a révélé la réponse ou de la direction de l'aide de CSS Variables... Cela suppose que l'utilisateur a fourni une feuille de style à l'intérieur de leur portée de l'ombre-dom. Que faire si ils n'ont pas? Par exemple, ce que si ils ont juste style quelque chose sans fournir une variable. Comment accéder à une classe au sein de la SD w/ pas de css variables et ou Pseudo-éléments? Par la façon dont le jsfiddle vous avez semble avoir depuis obsolète
    InformationsquelleAutor CletusW
  2. 15

    Maintenant (2016), vous pouvez accéder à ouvrir créés par l'utilisateur ombre des éléments du DOM (mais pas de l'agent utilisateur créé shadow DOM!) à l'aide de la méthode querySelector sur le Shadow DOM racine:

    <body>
    <div id="container"></div>
    <script>
        //Shadow Root
        var root = container.createShadowRoot()
        //new syntax:
        var root = container.attachShadow( { mode: "open" } )

        //Inside element
        var span = document.createElement( "span" )
        span.textContent = "i'm inside the Shadow DOM"
        span.id = "inside"
        root.appendChild( span )

        //Access inside element
        console.log( container.shadowRoot.querySelector( "#inside" ) )
    </script>
</body>

    JS:

    //Shadow Root
var root = container.createShadowRoot()

//Inside element
var span = document.createElement( "span" )
span.textContent = "i'm inside the Shadow DOM"
span.id = "inside"
root.appendChild( span )

//Access inside element
function get() 
{
  alert( container.shadowRoot.querySelector( "#inside" ).id )
}

    HTML:

    <!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
	<div id="container"></div>
    <button onclick="get()">Get</button>
	<script>
	</script>
</body>
</html>

    • Pourquoi ne pouvons-nous pas encore d'accès de l'utilisateur-agent de l'ombre dom?
    • Je suppose que c'est parce qu'il est natif du navigateur de mise en oeuvre, pas vraiment html.
    • Donc, il n'y a aucun moyen de récupérer le texte à l'intérieur de ces sortes de données des éditeurs?
    InformationsquelleAutor Supersharp
  3. 4

    Vous ne pouvez pas accéder au contenu de l'Ombre DOM à partir de scripts en dehors de l'Ombre DOM. L'Encapsulation est le but de l'Ombre DOM.

    InformationsquelleAutor int32_t
  4. 1

    Oui. Vous avez juste à appeler .racine ou .shadowRoot . Voici un exemple,

    document.getElementById('itemId').root

    Vous n'obtiendrez pas l'ombre de l'élément dom sans innerText ou innerHTML sur le parent de l'élément dom.

    InformationsquelleAutor pravchuk