Varun is a software engineer and a blogger and he’s going to be talking about. How do you actually do web development today in 2013? How do you use components? How do you use modular development to develop much more quickly than you can so? Okay, so my audible, audibility back? Ok, ok, let’s get started so today I am going to be talking about the web components and so what we have in future for developing components on the web, so my name is Varun as I will introduced.
So this is my twitter handle and I actually use google plus. You know me on SAS. Well, ok, so once upon a time waivers of just a platform for creating interactive and navigable contents, so it was just a static contents and people. So people were using HTML to define static text and images, and so we were using the JavaScript to put up some animations or some interactions on that page and CSS was just used to this just show some basic.
So it was a presentation layer thing which we were using. The capabilities on the browser were very much limited and we need to depend on back-end servers for accomplishing most of the user tasks. So there are lots of heavy lifting was still but done by the the backend servers. Things have changed a lot, and so, if you look at today’s web, so we have this powerful combo of html5, css3 and JavaScript browsers are becoming more and more powerful.
So we can do lots of stuff on the suburb publications of today or almost as powerful as the native applications. So we can do lots of stuff on the web platform itself, so we can do. For example, we can do. We can build application which can work offline, so you don’t need internet, it’ll, download all this stuff locally and you can build applications with that nature and sew applique. The your web applications can have access to your camera and it can access the devices and we can even have databases and a complete file system on the web platform.
So we can even do a real-time communication and lots of so web has web. As a platform has I mean we have gone so far in the platform, so with great power actually comes great responsibility, so as a front end engineer as more as web applications are getting complex as we start building more and more, as we start putting more and More features in the web applications, so there is a need that we should follow better or engineering practices.
So we should so back-end engineers have been have been organizing, the complexity have been modular racing stuff, and so they have been enjoying lots of facilities on the backend servers, but as a friend end engineer, so so it is a need. So we also should start building code that is maintainable. So as a front-end engineer, so we should also start writing code, which is maintainable and to achieve that the code should be modular and it should be encapsulated, and so it should be reusable.
So, basically, what it means is, we should start building reusable components which anyone can just plug into your page, and so they can use it. So some examples of this reusable components are so, for example, even this google+ like button + button and facebook like button. So all these things are components. So what do you take? So what you do is you take these components and you put it on your page.
Okay. So, as I said back-end engineers, so they have been achieving some of these things using the object, oriented language. So any language will inherently support will help us get there, but how do we get there on the web platform so before that? So, let’s see what’s actually missing on the web platform today, so let’s say so I’ll. Go back to the same example of the facebook. Like button and the google plus + button, so let’s say after that, if you are so if they are providing some sort of commenting capabilities, ok, so so they’ll show some text box or some way to actually share your the current page.
Ok, and so there is a chance that it could lead to some sort of name collision. So whenever you have both these components, you have two components: one from facebook and one from google plus. So there is a very good chance that these guys can collide, and so a command button within a command text box within Facebook component can interact with actually a google plus component. So there is no way of Dom we can.
We can’t do any sort of Dom encapsulation today, and so that could lead to problems like coalition of Dom contents. So you could, it could lead to some same ID collisions and things like that and it could potentially lead to broken styles. Let’s say if Facebook is trying to apply some sort of style for its its text box that might get applied to Google Plus also, of course, there are ways of overcoming this, so we use some conventions so, like all Facebook will have some prefix or we use Some suffix or some other conventions to overcome these problems, but inherently a web as a platform, doesn’t provide any sort of capabilities to overcome these.
So that’s what we are going to look at today, so I mean, as web applications get complex. So there is a set of frameworks which are becoming popular, so we call it as MVC frameworks or in general we can put it as my star frameworks, so these helpers to some extent so so they’ll help us to organize the complexity in our application. So so we can separate out the contents on the presentation layer to some extent with if you use any of these MVC frameworks, so we will be able to separate out the contents and the presentation layer.
So I mean there are so many yemisi frameworks available. So I’m not going to get into any of the v-star frameworks, but I will just talk about how, in general any any of these frameworks work. For example, every if I mean, if you take any of MVC framework for example, so it will be, it will provide you an option to define views. Views are a template, so that is how you’re you that’s, that sort of like the presentation layer and then so.
You will be associating a model with your view, so you’ll be creating a model, object and you’ll. Associate that with a view and then so will have to provide a way for monitoring the changes. So all these libraries provide some sort of mechanism for data binding. So, whenever the model object changes, so it should reflect immediately on the views and whenever the views changes, it should reflect on the model object.
So that’s the principle with which any of these MVC frameworks work. So, let’s see how these guys are able to achieve that. In today’s web, so this is so first, let’s look at how templates are there today, so there are various mechanisms in which you can create a template, but one of the still commonly used method is creating a Dom which is off screen, so you can create a And you can either hide it or you can put set its display to none.
So this is how we do it, so we generally create a development or something so which has all the all it’s. So it’s like an abstraction it brought it I mean. So it’s composed of all its comp parts and then you’ll hide it initially and whenever you want to show it on the screen, so you will change its visibility, but then it has its own problem. So one of the obvious advantage with this is see. We are working directly on Dom elements, so say it’s a declarative, so you don’t have to use JavaScript to achieve any of these things.
It’s declarative, but then so some of the obvious problems are so as we create this template. So, whatever resources you are trying to load between that page, so those all the resources are pre-loaded. So it’s not so whenever so the moment you create this template. So at that time itself the images and everything will be loaded. So it doesn’t wait for you to actually start consuming that template.
So that is one problem and it doesn’t solve any of the problem with encapsulation, which I talked about like whenever the same name is being used somewhere else, so it doesn’t solve any of those problems. So that’s the first method, so in the second method, what we do is yeah yeah. So on the previous slide, you had hidden as a value there as an attribute yeah. Is it valid? Yes, so it actually works if we simply say hidden in the Dom yeah insurgency.
Essence: yeah. Okay, that’s new! I didn’t know about that. Okay, so it the only difference between that and display. None less. So this will still occupy the space. So it will occupy said I’d, say if your device off with some 100 pixels, so it will still occupy that space. So that’s the difference between hidden and display now, so this effectively does equivalent of visibility, colon hidden, yes on the second way of second method of creating templates today, so so we can either use strings.
So whatever the contents, which we want to put it up in the template, so we can have a string content or the other commonly used technique is putting that content within a script tag when are overloading the behavior of scripts. So you can set some type something other than JavaScript so that the browser’s doesn’t load that so so here the problem is, we are sort of getting into parsing this string parsing, and this could lead to other cross-site scripting attacks, and things like that.
So this this opens up a new set of problems, so we have two methods. Today I mean so we can roughly classify the techniques into these two buckets, but both of both of these techniques have its own a problem. So, let’s look at so this is templates of today and now, let’s see how models are what is there in JavaScript space, so in JavaScript things are little more better, so we can organize the complexity to a better extent because of its module pattern.
So generally, when we create some model or model object or something on JavaScript, so we and we actually tend to create a mod. We use model patterns or a JavaScript object constructor to achieve that. So if you look at any of the implementations of any MVC frameworks like backbone or something else, so what they do is they’ll provide you with one base class for your model, and so you will have to extend that model to create your model class.
So the reason for that is so so whenever you are trying to change any of the property of your model, so they need to know the changes. So there are so inherently there is no way for you to monitor changes in an object. So the that’s. I’r talking about present day today’s web, so things are going to change in the future, but in today’s web, so there is no easy way for you to monitor for any new property changes of an object.
So how these libraries achieve is so they’ll provide you a rapper object, so you will be using the accessors of those rapper object, and so once you use that object, so they’ll set they’ll, get to know that you’re trying to modify this property, and so that’s how It is handled today this is for the model changes now coming for the other side of binding, so for whenever the view changes, how do we map it to the model? So, for that we use, we can use either Dom mutation or some of the event handlers, but so these are not very efficient, so I so I have a later slide, which will talk about the mean: what are the better approaches so, but so in today’s web.
So, even though we are trying to organize the complexity through the amidst our frameworks, so there are some still inherent. There are some problems which still exists today, so let’s see how we can achieve encapsulation today, so this is actually a fundamental concept of object-oriented programming, so it is. This helps us to separate the code which we write from the presentation layer and then so in web.
Also, we have this to some extent, so we can achieve this with the help of iframes. So I frames help us to abstract stuff to some. So it’s it help us to make things very secure, but then so it has its own problem, for example. So it doesn’t fit well so whenever so, it doesn’t resize depending on the contents. Let’s say: if your content is a big, I mean it doesn’t resize to fit the contents. So that’s a problem with that.
So there is a new spec which is coming up, which called seamless iframe, so it’s actually not attribute which you set on the iframe, which will help to solve some of these problems. It’s still very much new, it’s not available in all the browsers, but so that’s something you can read out for so what we have seen so far is so we have seen what is the principle behind any MVC framework. So what are all the different components of it and then so how these things, how we are achieving all these things using today’s web? So there are, of course there are a lots of problems so in this, so whatever stuff which we have discussed so in today’s web.
So there are inherent problems in the web platform. So how are we going to solve all this web platforms? Is the solution to all these problems? So it’s actually a set of it’s not a single API, so it is a set of a PA which is going to provide you some of the some of the functionalities. So let’s look at all those things. Ok, some of the key players of web components are template, so this is a native HTML native way of defined, defining a template, so you can define any inner chunk of cloneable DOM, and so you can use it later.
So the I will talk about in detail about each of these things and then also using web components. It will provide your mechanism to create custom elements. So let’s say if you want to extend so currently there is nothing called so we have divs behave spans paragraphs and stuff stuff like that. But if you want to create a tub tub container natively in HTML, so currently there is no way for it. So we use some sort of JavaScript library or some library to get there, but so using this custom elements, so you will be able to create some tab container element.
I mean any element for that matter, and so later you will be able to declaratively use it, and the next one is shadow Dom so share atom is actually the building block of encapsulation. That will help you to abstract some of the implementation details to the consumer. So we will see all these stuff in detail and some of the supporting things are so we have something called style encapsulation so which will help you to specify a style to a particular scope.
So we’ll we’ll see all these things will start with templates. So, as I said so, this is something which is not available in browsers today, but you can expect it so this this package, so that is a respective ailable for this and browser vendors are working on it. So we can soon expect this in different browsers. So how it works is so we can define, we can use this template element and also we can give an ID for this template and you can define whatever the Dom elements which goes inside that.
So again, we are where we are talking about declarative way of defining the component yeah. A quick question see if you say scripts, don’t run in your template yeah what happens with browsers that don’t understand the template. Oh there’s a very compactly. Currently, there is a render it as in line yeah okay, so basically that means that you now need a way to also preserve browser compatibility in something that is supposed to be inert yeah.
I covering that. I hope you are oh no I actually. I am NOT cutting that, but i’ll see i’ll try to see if I can link it to somewhere so uh. So today, yep to Jason’s point right. I think the way they will maintain backward compatibility will be exactly like they were. They did for the new html5 elements. Is that they’ll put div tags inside we’ll have to handle all the backward tips that will hopefully have styles that will hide and then we’ll have to scrape will have to script it to an extent so that we don’t end up with things being visible right in Old browsers, so the you know you can just put a display, none on template and hide it by default in old browsers.
But what do you do with scripts? How do you tell the browser to not run scripts display? None isn’t the only problem. It will still create all the image resources. It will do. A whole bunch of issues will arise when this happens yeah. So the advantage here is again. We are directly working on Dom, so it’s a declarative way of for doing things and then so the other advantages. So the contents are not parsed and so they’re not rendered so you want so whenever if you have any images or anything within your template, so those things so one get loaded.
So this is how you have to use it, so you can just select that template. Whatever you have defined and then so you should t dot, so the template, dot content content will give you the document fragment. So whatever you have defined within that template, so you will get hold of that contents and you can clone it and attach it anywhere. So wherever you want to use that template, so all you have to do is so you just have to clone that content and you just have to include it up and it to the place where you want to insert okay.
So so this solves all the problem which we discuss, so we are not doing any string parsing, so the scripts are not loaded, of course. So there is this back up backward compatibility issue, but other than that, so it solves all the problems natively on html5 itself. Okay, so next, let’s see what is shadow Dom shadow DOM is currently available in Chrome Canary, so I’m not sure whether it has landed in Google Chrome, but it has already available in Chrome, Canary I’m using Chrome Canary.
So the concept itself is so it’s actually a separate topic in itself, I’m going to cover some of the basics of it, and so how we can define insertion points in that and different aspects of it so looks like this is not something new. So some of the Dom company Dom elements which we already are aware of, so those are doing that to some extent. So, for example. So if you look at any article tag or if you are looking at any of the special in the day, time or time, input elements, so if you see here so it’s all so it’s composed of some complex set of controls.
So it’s not a single control. It’s so you have a slider here, I mean a timeline here and then so you have the control to pass play. So these are all different components, but when you actually inspect this things, you will actually let me go there. So what you are actually seeing here is its you have a drop down and there is a spinner. So there is a whole set of complex, Dom objects. There Dom elements there, but when you actually look at when you inspect for that element, so all you are seeing is just an single input.
So essentially, what browsers are doing this? It’s hiding some of the Dom nodes within certain other Dom nodes. So this has been there for in browsers for some time, but just that it’s not exposed to the end users. So shadow DOM is a specification. It’s a it’s, an APA which will help you to see. We can also define. We can also hide certain Dom nodes within other downloads, okay, so this is how it works.
So let’s say you have the initial Dom component, something like this so Dom tree. Something like this. You have a host and you have some certain children, and so let’s say if you want to attach some, if you want to abstract this host node and if you want to install whatever children it is being rendered. If you want to render this contents. So what you just jump to the example? So so, whatever you sing on the top, so I am defining the development, and so it has a host and within that I have certain other elements, so it has a hitch one.
She chose my name and my place and some other div contents. So that’s the original content, which is there in the Dom tree. So now I define our a shadow host, so this is how I created. Currently, you have to use the event that prefix to get there, so what do you do? Is I get the so there is. I there is a method called create shadow host, so I pick I actually select the host and for that host I am getting the shadow root.
So once I get the shadow root, I can add any elements. So here I am just putting some h2 and I am just putting some other deep contents, so when it’s actually rendered on the browser, so instead of seeing the original contents, you will be seeing the shadow content. So this sir demo. Actually so, let’s say, let’s see what we are seeing on the so this is, she said visible at the back. Ok, I will just controller.
So that’s what i’m trying listen to you, okay! I will just read out: what’s there, so what you are seeing in the inspector is still the original dom dom contents. So it’s still showing the ID eid host and within that I am seeing the h1 element and the h2, which shows the name of the place and things like that. But what it actually rendered is something different. So you have a shadow host, so you have a host and which has some certain children initially.
But so you have, you have created a shadow root and you have added some content to that. So when you attach it it actually it gets replaced. So whatever contents you initially had in your host, so that will be replaced by this new content so to sew up this in developer, chrome, developer tools, so there is a way you can actually see what is being rendered. So to do that. So that is so. There is an option called it shows, shadow Dom so once you enable this option, so, instead of the original content, you will be still able to see the shadow Dom.
Also, along with that, you will be seeing this on the shadow Dom also so for that we need to close and open it. So now, if I inspect, I think I’ll again read out so so now, apart from just seeing the original contents of that host, so you are seeing the the shadow Dom whatever contents we it got replaced. So that’s the that’s how it works. So you have to enable the show shadow Dom when your dev tools, I have a question.
Okay, is there a way to define the shadow Dom decoratively? Oh so we are declaring so so once you get that object, shadow Dom object know rather than doing it. In Java, so can I do it in HTML s 0 so that you can do it in so if you have custom elements, I will be talking about that custom elements. So once you define that so everything you put in within that custom element, it’s actually a shadow Dom only just quickly run through so now coming to the style and capsulation part.
So whatever contents you actually put so so initially we are at the sketch to undo so now. Let’s say if I am adding a style tag within this shadow shadow Dom, so it will so that style will be applicable only to my shadow Dom. So it’s it’s encapsulated within that scope, so I have the setting h2 color red. So if, as you see, it’s only applicable to the the inner contents, it’s not reflecting on the my host.
So to do that we can show. There are properties which, using which we can change, that behavior okay. So this is an important point point. So we have seen how to define how to set a color. So let’s say how to style your dumb shadow, Dom okay. So now, in practice, what we’ll be doing is so instead of V, defining the color or something so we’ll be providing. So when you want to build a theming capability to your shadow, Dom.
So what we’ll be doing this? So that’s where our CSS variables helpin. So we can so instead of putting the actual color itself, so we can use this where hyphen some variable, so whenever the consumer, who ever is consuming this shadow Dom so they can actually use that variable, so, whatever the property they set down that variable, so that Will be reflected that will be used within that shadow Dom, so you can actually use shadow Dom in conjunction with CSS variables, and so the other thing is so showed you.
We had some initial contents and we added some shadow Dom, so it it entirely got replaced. So, instead of that, so there is something called insertion points. So if you don’t want the complete contents to be replaced, if you want only certain parts of your original Dom to be used here, so you can use this content element, so you can show on it. Has a select attribute, so in the select a tribute you can specify any CSS selector.
So here what I am so this is the original my host. So in the host. I have something called first name, last name and all so here. So when I use it so I can use this content and content select first name, so it will use. The chase is selected to select that element from the original host. So this is how it will be used in practice where so we can specify. So this is more like a way of specifying ap ice into your shadow, Dom now, let’s look at observers, so we have also currently what we have is mutation events, so whenever you change a Dom, so whenever you modify a Dom, you add something to your Dom Tree so you will get you will get notified as events, so I have told in the earlier slide that it’s not very efficient, so there is something called.
I mean mutation observers, so this is some sort of similar to events, but then so, instead of getting notified for each and every event, so whenever a bunch of dorms are getting modified, you will get it in a single call back. So there will be a single call back in which you will get all the mutations, so then, so it is very efficient when compared to the mutation events, so we will see that with an example.
Okay, so I built a small example today team india’s taking on australia, so this is the 15-member squad, and so this is simple thing which will actually sort and give you the top 11. So so initially, I am going to use dumb mutation events. So let’s say if I am clicking on rotate, so it’s actually trying to adjust all these 15 players and it it may need, rearrange those players so in that process, so we have got two thousand events fired.
So we have. We are trying to do some person rotations and in that process we have done some Dom manipulations some 2,000 times, and so it has triggered the call back two thousand times so now, let’s see how it will be done in the case of mutation observers. So let’s say the same same use case if I use mutation observers, so I will be getting two thousand on mutations, but i’ll be getting all these changes in a one call back.
So that’s how it is efficient, so also it doesn’t do a whole propagation. He doesn’t the event needs doesn’t need, since it’s not an event, so it doesn’t need to propagate the alway so, but so you will get all the mutations in a single call back. So the another interesting thing which is coming up is so object observer. This is similar to mutation observer, but it’s for objects. So let’s say you have a java javascript object and if you want to monitor for some changes so now it’s possible.
I think it’s already available in Chrome Canary. So this is how you have to use it to. You have to use object that observe and you have to give a observer function, a call back and so the object which are actually observing. So whenever you add any new properties or you change some property, so it will get notified. So again, the important thing to note here is so it’s not triggered for each and every change.
So let’s say if you are doing you’re setting name and if you are setting Peter handle on a particular object, so the browser the JavaScript engine decides when to call so it will club certain operations and it will call the callback in a single go. So so now we have seen how to create templates natively and with the help of shadow, Dom will be able to encapsulate stuff, and so with observers will be able to bind the model and the view.
So now that we have got all these things. So how do we create a custom element? So let’s say if you want to create something called X tabs, so there is something called element touch. This is still not available, so what you can do is so I will come back to your question. See you are asking see if we can declaratively define a shadow Dom right, so whatever contents you put in within that template.
So that’s that’s actually like a shadow Dom so when you consume it using that X tabs when you are consuming it. So at that moment you will not be seeing any of the implementation whatever so, for example, so there you are seeing content select h1 first list. So that is an insertion point and you are declaratively setting it so once you do that, so when you consume it, so you can declaratively say that h1 title, so it will get replaced there, and so, apart from the actual templates and the shadow Dom, you can Also put in some scripts, so we’re in you can specify some API.
So whenever somebody wants to instantiate the component using javascript, so they can still do it, so you so whatever constructor, which we specify here. So that will go on global scope, so you can instantiate it from anywhere so for getting this features you need to enable, so I am so. These are all the things you have to follow to use some of these features. Okay, so this is a doodle. I of build something back, so this is actually your it’s not image or it’s not it’s completely CSS and HTML.
So there is no images used here. So all these animations, our CSS beast, and for just for the most following, so I have used the JavaScript library. So now what I have done is: I have made this into a company, so there are lots of okay again so so today, browsers are not supporting any of these. So many of these standards it supports shadow, DOM and the observers are available, but not all these things which we have discussed are available today, but you can still use it using some of the polyfills.
But there are some. There is one of firefox library called X tags, and so there is so one more polyfill. There is a model view. There is a MVM mdv framework. I think it’s from google, so so using some of these things, you can you can just play with these functionalities. Today itself, so this is something I have built, and so, if you look at the actual Dom so how I use it is so it’s a. I use the element X, hyphen doodle and there is a small open condom star again.
If I want to instantiate one more instance of this component, all I have to do is so: let’s see how we can add it to body. So I got the string. I ordered a string instead of the element, so so it got us one condoms. So so now this so I can anywhere wherever I want to use this component. I can just use this custom element so today. Also, you can enable yourself by using some of the polyfills, so I’m hoping that all browsers vendors will soon be providing these functionalities, and so that will help us to organize our code better.
And so we can natively achieve things which some of the MVC frameworks have been achieving so far, so these are some of the references. That’s it from my side, any questions. What is the performance impact of these components? Oh, as opposed to, I haven’t really done anything. I haven’t actually lived into the performance aspect of it. This is very it. This is very new. Actually so not all browsers are supporting it, so only shadow, DOM and style encapsulation features are available on that took, chrome can realign, and so there is one more.
There is an excellent library from Firefox. It’s called X tax, so you can use that to use some of these standards, but I haven’t really done any performance analysis on that hi here yeah. Is there any limitation of the the code what we are using, because here it seems like we have to encapsulate the JavaScript, HTML and CSS all together, so is that limited to one single file or something you know? So there is nothing like that, so you eat.
So I mean it’s it all mandates. Is you need to follow that structure, but have you include that it can be spread across multiple files or so there is no mandate on? Have you organized your source code? So all it needs is so it specifies certain format. You need to create a element, a custom element tag and within that you can put your shadow DOM, and so that’s all it mandates, but it doesn’t mandate you to keep it in a single file or you can keep it in a different file.
Also, okay, so basically it is the same as like how we are currently doing like. First, when you’re loading a page, you have to load all the supporting files and everything, but your way of creation of the Dom our creation of the object will be the different yeah exactly so. If I want to select say if I I so we have this component, so let’s say: if somebody else want to you consume it, so I will be providing a single file and so the all the other guy needs to do is so he needs to include That as a link link relative components, and so once that is done so he’ll be able to shop yo.
This is this is the this is how the consumer needs to use it. He needs to add a link tag with the HTML, so this is where the original definition of the the custom element was there, and so once you have that, so all you need is just that the definition so after that you can start consuming it. Any other questions, Oh yo, so there is a very good when Google+ page, where lots of talks and information about the specification are posted.
So you can follow that or you can follow eric beetle month. So actually I this presentation itself was inspired by his talk, and so there is a very nice article about shadow Dom on html5 rocks. It’s called shadow, Dom one, not one so so. This article talks about the basics of HM in shadow DOM, and so these things are about mutation, observers and yeah. So do you see people using this instead of templating as we do it right now? I don’t.
I haven’t seen anybody using it in production, or it’s not even close to that, but I mean, as the spec gets more standardized and as more grossest windows browser vendors start using it. So probably this will be the future all right. So you know it seems like a very neat way of essentially taking a single replicating a component. It’s often repeated yeah and inserting it in multiple places without changing the code yeah.
Now, when you do, that, can you make each of them slightly different in their behavior? Is so that’s what we have this API is for. So apart from declaratively, defining your the the actual component, so you can even write some JavaScript so that will that will help you to change the behavior. So let’s say so: that’s a mean hours. Sorry, it’s a it’s the same tub controller component, but now I am adding were constructed to it and I can define certain methods within here.
So so, when you create, when you instantiate the tub controller, you can actually set certain attribute or certain things, and you can change the behavior okay, so you can actually run a scratch custom. Every time you use a component okay and did I just notice a style tag in the section there in the previous slide, the slide you were at just now, so you got a slight a style tag then, which is not in the head: yeah, oh no! This is so this actually uh.
So basically I define I element, so this is the so the whole HTML will contain only this element declaration and within that I will put a put up a style, so this style will be scope only to this element. Right so does restyle encapsulation. So if I want to sorry what exactly does it inherit the parent it doesn’t it doesn’t? So that is what I was saying. So if you want to overwrite that behavior, so there is something called reset style inheritance or let me go back to that slide yeah.
It’s called reset style inheritance. So, by default in any style which you put in within a dom shadow, Dom it doesn’t inherit anything from the parent and also whenever you put some whatever you, whatever styles you put put in here, so that doesn’t go back to the the consumed work. So if you want to overwrite that behavior, so there are two properties, reset style, inheritance and apply author style.
So once you so the first one indicates that so, if you set it to true, it will inherit these tiles from the container page and the second one. What it says is the other direction, so if you set it to true by default, it’s false. So let’s say here I have changed h2, and this is this tile encapsulation title that is also h2. Currently, that’s not getting reflected, even though I have set the content.
So I will show you the okay, so this is how I am doing, because shadow DOM is something already available. So I know this default. Behavior is only scope, it scoped. It is limited to that shadow Dom. So, even though I have said this h2, so it’s getting applied only to this, so this is the shadow Dom which is rendered and it’s getting applied only to this guy and not to something else which I have on the page.
So, for example, this is the title of the page so which again is a h2 element, but it’s not getting reflected. I think I can show you it doesn’t support like waiting. That’s pretty cool thanks, however, in one more question: okay, yeah yeah, so that style tag right. I believe it. It was in line there, but can it be external call as well? Is it can be external as well, then, when so you said that it doesn’t parse.
It right when, on page loop that template your does it also does it get downloaded on page load or does it get downloaded when it’s in it? Okay, i’ll, have to check i’ll check and get back to you on items? Okay, okay! So we’re going to take another break now, for those who still have questions one is going to be around. Others will see you at four fifteen. Ok,
Jimmy's Internet Marketing Business Blog 