DevBytes: Web Components - Shadow DomYouTube↗  IA↗(long shot)
Science & Technology  30.5K views 302 likes 10 dislikes   16 Oct 2014
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
ELJI KITAMURA: Web components enable you to do build great websites through the use
Web Components te permite crear páginas web geniales
of reusable components.
mediante el uso de componentes reutilizables.
But what does it take to build a web component?
¿Pero cuánto tiempo lleva crear un Web Component?
My name is Elji, and today I'm going
Me llamo Eiji, y hoy voy a hacerte un resumen
to give you an overview of Shadow DOM.
de Shadow DOM.
Shadow DOM provides you a way to add local DOM tree inside a DOM
Shadow DOM te proporciona la mejor forma de añadir un árbol DOM local
element with local styles and markup
dentro de un elemento DOM con estilos locales y un marcado
that are decoupled from the rest of the web page.
que están separados del resto de la página web.
It's just like the built in elements created by the browser [? vendors ?].
Es como los elementos integrados creados por los comerciantes del navegador.
Let me show you an example.
Deja que te muestre un ejemplo.
Here is a video rendered in the browser using the HTML video tag.
Este vídeo se muestra en el navegador usando la etiqueta <i>None</i> de HTML.
As you can see, the video element not only provides
Como puedes ver, no solo muestra el vídeo,
video, it also provides its controls.
sino que también muestra los controles.
Notice that we did not have to write any HTML to make those controls up here.
Observa que no tuvimos que escribir HTML para crear estos controles de aquí.
They're just built into the video element itself.
Se crean dentro del propio elemento de vídeo.
If we open up the DevTools and turn on Show User Agent Shadow
Si abrimos DevTools y activamos "Show user agent shadow DOM",
DOM, we can actually look at the source for the video controls.
podemos ver el código de los controles de vídeo.
And you see that they're actually made of HTML.
Y, como puedes comprobar, se han creado con HTML.
This is an example of using the Shadow DOM.
Este es un ejemplo del uso de Shadow DOM.
The nice thing about Shadow DOM is that you can actually
Lo bueno que tiene Shadow DOM es que puedes usar esta característica
use this feature in you own components.
en tus propios componentes.
At the time of this recording, Shadow DOM
Hasta el momento de esta grabación,
has landed in Chrome and Opera.
Shadow DOM está disponible para Chrome y Opera.
Firefox supports it in Nightly.
Firefox lo soporta en "modo nocturno".
But support for web components is changing weekly,
Pero la compatibilidad de Web Components cambia semanalmente,
so be sure to check chromestatus.com
así que ves comprobando en <i>chromestatus.com</i>
for up-to-date browser support table.
la tabla actualizada con la compatibilidad de los navegadores.
To detect the availability of the Shadow DOM,
Para ver la disponibilidad de Shadow DOM,
check if document body createShadowRoot is available.
revisa si document.body.createShadowRoot está disponible.
For unsupported browsers, you can use platform.js,
Para navegadores no soportados, puedes usar <i>platform.js</i>,
a collection of a web components polyfills
una colección de polyfills de Web Components
made available as part of the Polymer library.
que están disponibles como parte de la biblioteca Polymer.
This will automatically detect the availability of the Shadow
Esta detectará automáticamente la disponibilidad de Shadow DOM
DOM and polyfill it if necessary.
y si es necesario añadirá código.
With Shadow DOM, elements can get a new kind
Con Shadow DOM los elementos pueden tener un nuevo tipo de nodo
of node associated with them called shadow root.
asociado a ellos, que se llama "shadow root".
An element that has a shadow root associated with it
El elemento que tiene un "shadow root" asociado a él
is called shadow host.
se llama "shadow host".
The shadow root can be treated as an ordinary DOM
El "shadow root" se puede tratar como un elemento DOM corriente,
element so you can append it [INAUDIBLE].
así que lo puedes añadir [INAUDIBLE].
With Shadow DOM, all markups and CSS are scoped to the element.
Con Shadow DOM todos los marcados y CSS están delimitados por el elemento.
This means that CSS defined inside of the shadow root
Esto significa que el CSS definido dentro del "shadow root"
will not leak out to affect a parent document.
no podrá salir y afectar al documento principal.
And it also prevents the parent document from accidentally [? styling ?] the contents of the shadow
Y también evita que el documento principal diseñe por error los contenidos
root.
del "shadow root".
To create the shadow root, call createShadowRoot.
Para crear el "shadow root", llama a <i>createShadowRoot</i>.
Add any DOM element you wish to at that Shadow DOM too.
Añade el elemento DOM que desees al Shadow DOM.
It will return shadow root object, which you can then append contents to.
Devolverá el objeto <i>ShadowRoot</i>, al que luego podrás añadir contenidos.
The resulting DOM structure will look something like this in DevTools.
La estructura DOM resultante quedará así en DevTools.
As you can see, there is a node called shadow root
Como puedes ver, hay un nodo llamado "shadow root"
underneath shadow host, followed by the appended contents.
debajo de "shadow host", seguido de los contenidos añadidos.
You may wish to render children of your shadow host
Quizá quieras mostrar los hijos de tu "shadow host"
inside the Shadow DOM.
dentro del Shadow DOM.
This is especially useful for dynamic content.
Esto es especialmente útil para el contenido dinámico.
For example, a name tag that is styled in the Shadow
Por ejemplo, un <i>nameTag</i> que se diseñe en el Shadow DOM,
DOM, but needs to pull in the user's name
pero que necesite tomar el nombre de usuario
from an external input.
de una entrada externa.
You can do so by using the content element.
Puedes hacerlo usando el elemento <i>content</i>.
By giving content tag a select attribute with CSS selector
Al dar a la etiqueta <i>content</i> como valor un atributo <i>select</i> con un selector de CSS
as a value, you can distribute host content to wherever you want.
puedes distribuir el contenido de <i>host</i> por donde quieras.
Note that select attributes can only take direct children of the host element.
Observa que los atributos <i>select</i> solo pueden tomar hijos directos del elemento <i>host</i>.
Because adding content in [INAUDIBLE]
Como añadir contenido [INAUDIBLE] no es tan eficiente
isn't that efficient, you may wish to use a more [? declarative ?] approach.
quizá prefieras utilizar un enfoque más declarativo.
You can actually do so by combining template elements with Shadow DOM.
De hecho puedes hacerlo combinando plantillas con Shadow DOM.
In a previous episode, I explained how to work with the template elements.
En el episodio anterior, expliqué cómo trabajar con las plantillas.
Here's an example code I used there.
Aquí tienes un código de ejemplo que utilicé.
I'm going to combine this with Shadow DOM.
Voy a combinarlo con Shadow DOM.
In this template, let's add content tag
En esta plantilla, vamos a añadir la etiqueta <i>None</i>
so that H1 tag inside Shadow host will be projected here.
para que la etiqueta <i>None</i> que hay dentro del "shadow host" se proyecte aquí.
And using JavaScript, create Shadow root,
Y usando JavaScript, crea <i>ShadowRoot</i>
then stamp out the template using import node.
y elimina la plantilla usando importNode.
And the result will look something like this.
El resultado será más o menos el siguiente.
So that is a very basic of the Shadow DOM.
Hemos visto lo básico de Shadow DOM.
But remember, this is only a tip of the iceberg.
Pero recuerda, esto es solo la punta del iceberg.
There are tons of interesting things to learn around Shadow DOM, such an styling, event handling,
Quedan miles de cosas interesantes por aprender de Shadow DOM, como estilos, gestión de eventos
and working with multiple Shadow roots.
y trabajar con múltiples "shadow roots".
The best place to learn more about Shadow DOM
Donde mejor vas a aprender acerca de Shadow DOM
is HTML5 Rocks.
es en "HTML5 Rocks".
You can start from 101, but there are also 201 and 301,
Empezarás desde el 101, pero también tienes el 201 y el 301,
so make sure to check them all out.
así que asegúrate de repasarlos todos.
Thank you for watching.
Gracias por ver el vídeo.
See you in the next episode.
Nos vemos en el próximo episodio.
Similar videos:

DevBytes: Web Components - HTML Imports
Google for Developers
21.2K views 152 likes 9 dislikes 17 Dec 201440% match

DevBytes: Web Components - Template
Google for Developers
13.2K views 134 likes 4 dislikes 02 Oct 201437% match


DevBytes: Introduction to Android Auto
Google for Developers
159.8K views 733 likes 35 dislikes 18 Nov 201435% match


DevBytes: Web Components - Overview
Google for Developers
25K views 248 likes 14 dislikes 25 Jun 201435% match


Build a video chat app for Android, iOS and the Web (100 Days of Google Dev)
Google for Developers
59.4K views 546 likes 30 dislikes 11 Jul 201527% match

Polymer: making Web Components accessible
Google for Developers
27.6K views 195 likes 11 dislikes 13 Jun 201426% match

WebRTC Update
Google for Developers
32.4K views 62 likes 2 dislikes 30 Jun 201425% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201424% match

DevBytes: Chrome DevTools Device Mode
Google for Developers
73.4K views 340 likes 26 dislikes 10 Oct 201424% match

VR Design Process - Google I/O 2016
Google for Developers
38.1K views 401 likes 4 dislikes 19 May 201624% match

Google Cast: Introduction to the SDK
Google for Developers
47K views 141 likes 7 dislikes 10 Dec 201424% match

Easy Maps Apps in Java and Python
Google for Developers
30.5K views 238 likes 8 dislikes 07 Jan 201522% match

Learning to speak Designer - Google I/O 2016
Google for Developers
58.1K views 952 likes 21 dislikes 19 May 201622% match

Google I/O 2014 - Polymer and Web Components change everything you know about Web development
Google for Developers
142.7K views 1.2K likes 22 dislikes 25 Jun 201422% match

DevBytes: Intro to Google Maps Data Layer
Google for Developers
81.1K views 179 likes 7 dislikes 18 Mar 201422% match

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201422% match

Push notifications for the web -- LazyWeb #3
Google for Developers
28.4K views 255 likes 10 dislikes 28 Apr 201522% match

Push Notifications on the Open Web to increase engagement (100 Days of Google Dev)
Google for Developers
38.8K views 300 likes 26 dislikes 04 Jun 201522% match

Introduction to the Physical Web (100 days of Google Dev)
Google for Developers
89.6K views 702 likes 16 dislikes 18 Jul 201521% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201421% match


Core Toolbar -- Polycasts #03
Google for Developers
34K views 265 likes 7 dislikes 20 Oct 201421% match

DevBytes: What's new in Android 5.0 Lollipop
Google for Developers
129.1K views 1.5K likes 37 dislikes 17 Oct 201421% match

Google I/O 2014 - Polymer and the Web Components revolution
Google for Developers
48.9K views 344 likes 14 dislikes 25 Jun 201421% match

Android TV: Using the Leanback library
Google for Developers
32.8K views 227 likes 10 dislikes 27 Oct 201420% match


Supercharging page load (100 Days of Google Dev)
Google for Developers
99.2K views 2.5K likes 22 dislikes 10 Jun 201520% match

Core Icons -- Polycasts #01
Google for Developers
58K views 380 likes 5 dislikes 22 Sep 201420% match

Google Play Services 5.0
Google for Developers
30.9K views 109 likes 18 dislikes 25 Jun 201420% match


DevBytes - Your App, At Scale with Google App Engine
Google for Developers
103.5K views 237 likes 4 dislikes 24 Mar 201420% match

Listing your files in Google Drive
Google for Developers
40.2K views 125 likes 20 dislikes 13 Nov 201420% match

Core Header Panel -- Polycasts #04
Google for Developers
25.8K views 190 likes 1 dislikes 05 Nov 201420% match


Settings Privacy About Contact Donate