Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Chrome 53 est disponible et apporte la prise en charge de shadow DOM V1
La fonctionnalité pour encapsuler le DOM interne d'un composant

Le , par Stéphane le calme

130PARTAGES

6  0 
Google a annoncé la disponibilité de la version stable de Chrome 53 sur les plateformes Windows, Mac, Linux et Android. L’une des principales fonctionnalités est la présence de Shadow DOM, une fonctionnalité à l’intention des développeurs qui était déjà proposée depuis la version bêta de Chrome 53. Comment fonctionne-t-il ? Le principe de Shadow DOM est simple : masquer en partie (encapsuler) le DOM interne d’un composant, mais aussi les styles pour ne pas avoir à travailler sur l’implémentation d’un composant.

Shadow DOM peut s’avérer très pratique pour la maintenance d’applications disposant d’un grand nombre de lignes de code ou alors celles qui contiennent du code tiers (étant donné que vous devez vous assurer que ce code tiers n’affecte pas d’autres parties de votre application).

Par exemple, l’affichage d’un lecteur vidéo dont une partie du DOM a été encapsulée peut se résumer à :

Code HTML : Sélectionner tout
<video controls src="/test/video"></video>

Ici l’affichage de l’élément encapsulé (en se servant de l’interface shadow root :

Code HTML : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<video controls="" height="300" src="/test/video"> 
  #shadow-root 
    <div> 
      <div> 
        <div> 
          <input type="button"> 
          <input type="range" precision="float" max="548"> 
          <div style="display: none;">0:00</div><div>8</div> 
          <input type="button"> 
          <input type="range" precision="float" max="1" style=""> 
          <input type="button" style="display: none;"> 
          <input type="button" style=""> 
        </div> 
      </div> 
    </div> 
</video>

La prise en main de shadow DOM est relativement simple.

Chrome disposait déjà d'un support de Shadow DOM V0, qui était une version très précoce de la norme que les éditeurs de navigateur web avaient implémentée de différentes manières. Google affirme que plusieurs d’entre ces éditeurs de navigateurs se sont mis d’accord sur la façon de gérer Shadow DOM, une volonté qui est manifestée dans la version V1 actuelle qui est utilisée par Chrome 53. Toutefois, Google a également maintenu le support de la version V0 au cas où des développeurs s’en servent encore. Le maintien de ces deux versions se fera jusqu’à ce que la plupart des développeurs aient migré vers la nouvelle version.

Autre point important : l’API PaymentRequest. Cette API, qui apporte une fonctionnalité d’autoremplissage, permet aux développeurs de faciliter la façon par laquelle les utilisateurs remplissent des formulaires de paiement. « Effectuer des paiements en ligne peut s’avérer un processus encombrant pour les utilisateurs. L’autoremplissage a facilité la saisie des informations. Mais essayer de remplir un formulaire de vérification sur mobile relève toujours du défi », explique Google. Aussi, Chrome 53 vient avec le support de l’API PaymentRequest et Google assure que son API fournit une méthode rapide et sécurisée pour sauvegarder les détails des utilisateurs dans le navigateur, que les utilisateurs se servent d’une carte de crédit ou toute autre méthode de paiement comme Android Pay. Les utilisateurs peuvent également fournir une adresse de facturation, une adresse de livraison et d’autres informations sans avoir à les écrire.

Notons également le support de l’API Web Bluetooth. Cette API est disponible à titre expérimental sur certaines plateformes et permet à quelques sites de communiquer avec des dispositifs à proximité via une connexion Bluetooth.

Parmi les autres changements, les développeurs seront en mesure de changer l’icône Chrome qui apparaît sur la barre de notification des utilisateurs lorsque le navigateur déclenche une alerte. La version Android de Chrome supporte l’attribut « autoplay » pour les vidéos HTML5. Toutefois, cet attribut va fonctionner si l’attribut « muted » est également utilisé. Ce qui signifie en clair que les vidéos pourront se lancer automatiquement si le développeur les a au préalable mises sur sourdine. Si le son est activé, par défaut, la vidéo ne va pas être lue automatiquement.


télécharger Chrome 53

Source : blog Chrome, documentation shadow DOM

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de dk
Membre actif https://www.developpez.com
Le 02/09/2016 à 9:46
Bonjour, je ne suis pas certain de comprendre l'intérêt : en gros le shadow dom c'est juste un mécanisme d'include ?
0  0 
Avatar de Zefling
Expert confirmé https://www.developpez.com
Le 02/09/2016 à 10:00
Ça permet d'avoir un élement déconnecter du reste avec son propre CSS qui ne peut pas affecter le reste de la page. C'est un peu comme une iframe, mais sans tous les problèmes de cette dernière.
0  0 
Avatar de gCollin
Futur Membre du Club https://www.developpez.com
Le 02/09/2016 à 10:54
C'est une des briques essentielles pour le nouveau standard des webcomponents (http://webcomponents.org/)
Cela permet de développer des composants HTML (et javascript) réutilisables.

Actuellement le comportement des shadow est simulé par un framework javascript (polyfill), mais je pense qu'avoir le support direct dans le navigateur va améliorer les performances...
0  0 
Avatar de Zefling
Expert confirmé https://www.developpez.com
Le 03/09/2016 à 8:52
Citation Envoyé par gCollin Voir le message
C'est une des briques essentielles pour le nouveau standard des webcomponents (http://webcomponents.org/)
Cela permet de développer des composants HTML (et javascript) réutilisables.

Actuellement le comportement des shadow est simulé par un framework javascript (polyfill), mais je pense qu'avoir le support direct dans le navigateur va améliorer les performances...
Il en est de même pour Angular2 qui a une approche 100% composent avec leur shadow-dom simulé.
0  0