Web Components

Introduction This is the last post of the Web Component series. Hopefully by now you have a basic understanding of these emerging technologies and are as excited as me for the endless possibilities that they offer us! I will definitely write more posts on Web Components and Polymer in the future so keep posted. Below […]


Introduction In the previous post we got a first glimpse of the Polymer framework and created a very simple element together. In this blog post we’ll go over a larger implementation that will give us the chance to see some more advanced Polymer features. I won’t go over Polymer extensively but mostly pass over some […]


Introduction Now that we’ve introduced the basic concepts of Web Components it is time to check out Polymer. You should have noticed till now that the browser support for Web Components is at the very best, scratchy. => http://jonrimmer.github.io/are-we-componentized-yet/ They are only fully compatible with Chrome at the moment and we don’t know what IE, Safari will […]


Introduction Till now we’ve seen Templates Responsible for re-using parts of code Shadow DOM Encapsulation Custom Elements Create meaningful and descriptive HTML while inheriting logic from other elements   The last part of the core elements of Web Components are HTML Imports and they are responsible for delivering our components and data.


In the previous Shadow DOM post we went over the “hidden” encapsulated tree located in our page’s elements. In this post we’ll dive a bit deeper and create our own Shadow DOM. Shadow DOM Scope Checkout the following snippet. We create a Shadow Root with Javascript in our DOM and then we can treat that […]


Shedding Light on the Shadow DOM The hardest to grasp but probably the most exciting part of the Web Component realm is the Shadow DOM. Let us take an example of a DOM. Visiting dotnetweekly.com we can see some testimonial blocks. Check out the following image, we can see some blocks in the middle of the page […]


Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!