IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

JS et Shadow DOM


Sujet :

AngularJS

  1. #1
    bm
    bm est déconnecté
    Membre extrêmement actif

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Billets dans le blog
    6
    Par défaut JS et Shadow DOM
    Bonjour,

    J'ai un script Shadow DOM dans une page html :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!doctype html>
    <html>
     
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
     
    <body>
        <p id="paragraphe-shadow"></p>
        <!—Un simple paragraphe -->
        <script>
            // On crée une classe pour notre élément personnalisé
            // et on lui ajoute un template avec la méthode ‘innerHTML’.
            class SuperHero extends HTMLElement {
                constructor() {
                    super();
                    this.innerHTML = '<h1>Superman</h1>';
                }
            }
            // On définit notre élément personnalisé avec la méthode 'define'.
            customElements.define('super-hero', SuperHero);
            // On ajoute notre élément sur la page web !
            document.body.appendChild(new SuperHero());
     
            // p 42
            // On crée un nouveau Shadow DOM sur un élément de notre page,
            // qui possède l'indentifiant 'paragraphe-shadow'
     
            var shadow = document.querySelector('#paragraphe-shadow').attachShadow({
                mode: 'open'
            });
            // Pour l'instant notre Shadow DOM est vide,
            // mais nous pouvons lui ajouter du contenu.
            shadow.innerHTML = "<p id='shadow'>Salut, Shadow DOM !</p>";
            // On ajoute un peu de style à notre Shadow DOM
            shadow.innerHTML += '<style>p {color: red;}</style>';
            // Si on recherche notre contenu caché depuis la console du navigateur,
            // alors la commande suivante ne retourne rien
            // car le DOM n'a pas accès au Shadow DOM !
            document.querySelectorAll('#paragraphe-shadow');
        </script>
    </body>
     
    </html>

    Lorsque je déplace le script JS dans un fichier externe il n'y a pas de liaison
    vers une page html :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html>
     
    <head>
        <title>ES6</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="es6-chap4.js"></script>
    </head>
     
    <body>
        ESSAI ES6 :
        <p id="paragraphe-shadow"></p>
        <!—Un simple paragraphe -->
     
    </body>
     
    </html>

    Bizarre , pourquoi cette restriction d'un shadow DOM interne à la page ?

    @+

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    rien à voir avec AngularJS, tu fais référence dans ton JS à un élément qui n'est pas encore dans le DOM <p id="paragraphe-shadow"></p>, un F12, la console, t'aurais permis de le voir tout de suite

  3. #3
    bm
    bm est déconnecté
    Membre extrêmement actif

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Billets dans le blog
    6
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="es6-chap4.js"></script>
    C'est au niveau de la dépendance qui ne permet pas au codage JS de s'exécuter :

    es6-chap4.js :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    class SuperHero extends HTMLElement {
        constructor() {
            super();
            this.innerHTML = '<h1>Superman</h1>';
        }
    }
    // On définit notre élément personnalisé avec la méthode 'define'.
    customElements.define('super-hero', SuperHero);
    // On ajoute notre élément sur la page web !
    document.body.appendChild(new SuperHero());
     
    // p 42
    // On crée un nouveau Shadow DOM sur un élément de notre page,
    // qui possède l'indentifiant 'paragraphe-shadow'
     
    var shadow = document.querySelector('#paragraphe-shadow').attachShadow({
        mode: 'open'
    });
    // Pour l'instant notre Shadow DOM est vide,
    // mais nous pouvons lui ajouter du contenu.
    shadow.innerHTML = "<p id='shadow'>Salut, Shadow DOM !</p>";
    // On ajoute un peu de style à notre Shadow DOM
    shadow.innerHTML += '<style>p {color: red;}</style>';
    // Si on recherche notre contenu caché depuis la console du navigateur,
    // alors la commande suivante ne retourne rien
    // car le DOM n'a pas accès au Shadow DOM !
    document.querySelectorAll('#paragraphe-shadow');
    Faut que le script JS soit placé dans le body de la page html

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Faut que le script JS soit placé dans le body de la page html
    oui avant la balise </body> ou que celui-ci soit exécuté après chargement de la page si tu le places dans la <head>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    document.addEventListener("DOMContentLoaded", function() {
      // ton code ici
    });

  5. #5
    bm
    bm est déconnecté
    Membre extrêmement actif

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Billets dans le blog
    6
    Par défaut
    document.addEventListener("DOMContentLoaded", function() {
    // ton code ici
    });
    Merci, c'est ce que je ne pouvais pas deviner

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. recherche dans un document xml via DOM
    Par ndoye_zaff dans le forum APIs
    Réponses: 5
    Dernier message: 11/06/2003, 14h44
  2. XML DOM et gros fichiers
    Par Manu_Just dans le forum APIs
    Réponses: 4
    Dernier message: 28/03/2003, 09h50
  3. [DOM/SAX]Choix...
    Par miss8 dans le forum APIs
    Réponses: 4
    Dernier message: 17/03/2003, 18h37
  4. pb formatage document XML généré par un dom tree
    Par lionel69 dans le forum APIs
    Réponses: 11
    Dernier message: 17/10/2002, 09h53
  5. Réponses: 3
    Dernier message: 04/09/2002, 09h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo