Introducción al Shadow DOM

Extracto de la transcripción automática del vídeo realizada por YouTube.

alright so yeah it's a little information about me if you want to follow me on Twitter part of the modernizer team have a blog now work for a company here in Melbourne cool sick so you may have heard of the shadow Dom you may have seen it in blog post

somewhere if you've been using the shadow Dom not aware of it it's actually been in browsers but not enabled to developers for a very long time as part of the web component spec which is has five parts so shattered on being one you've got custom

elements you've got decorators you've got the template tag and you also have the method of importing components into your website and it's a pretty big deal so what do I mean by you've used it before so we'll have a look at this simple

input when we'll open up the dev tools and the important thing we have to do here is go to this awesome little cog which has lots of little options you can able and as this checkbox here this is show you the shadow Dom basically that then allows us to

dig into the subtree of what makes up for this instance an input element now you notice that there's this document fragment so all shadow Dom's just fragments of HTML there like a hidden subtree and you expose that and you can actually see that the

input actually has extra markup that will never be exposed to the user but for stalling purposes you can you can have more control as an author of a component by having like this hidden subtree with all this structural markup and you'll see it's got

a bunch of inline styles and it's got this interesting attribute which I go into later a pseudo and if I quickly just add an attribute to this I've changed at to date so dates go a lot of different components to it it's not just a simple input

and you'll see that the show Dom's updated and is a whole bunch of markup related to that element that's all hidden away it just makes it easier for the user to implement it basically it's a way to peek under the hood in a hi to all the structural

markup and it gives something simple to implement into your page so in instance you can see the input type date and you get all this functionality for free so if we want to create our own shadow Dom at the moment Italian chrome stable so the simple markup

[ ... ]

Nota: se han omitido las otras 1.056 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.