One of the bigger challenges that come with Web Components, is the way how we share common stylesheets across multiple components. Usually, when you build an app and you have styles that are shared along several parts of your code, all you have to do is to is to embed your collected shared styles in your application once, because that's it, right? So you probably have a build process that first pre-processes your stylesheets, concatenates them to one file and if you're good, that file gets minified. Great. But does that work for Web Components too?

One of the biggest things that come with web components, is the fact that you can extend existing elements. And since your own custom elements are also just HTML elements, you can extend them as well as native elements. From a surface point of view there's no difference between native elements and custom elements. Let's take a look at how we can extend existing elements with Polymer.

A year after pulling back the curtains on the Polymer Project, Google’s taken part of I/O 2014 to demo what the code can do. Right on cue, the web is abuzz with discussion comparing Polymer to other popular web frameworks, and it’s no surprise since it bears some resemblance to Google’s very own AngularJS. Join me after the break as I introduce Polymer and explore just how it relates to Angular.

Let's face it. Web Components is the next big thing. Sure, technologies have to be adapted and implemented by browsers first, but we are on the right track. There was an article recently popping up in the interwebs about Polymer vs. Angular and the differences between those two projects. While it's fairly easy to understand the differences between those two, it's a bit harder to grasp the different directions and approaches of Polymer in comparison to X-Tag, because both seem to provide a solution for building custom web components. This article explains the difference between Polymer and X-Tag.

Today we’ll look at how to wrap React components using Custom Elements, allowing us to interop with Web Component- based libraries using the DOM as a simple configuration API. Similar to libraries like Polymer, React cares about composition, lifecycle events and modularity so seeing how well it fits with Web Components is an interesting thought experiment.

Creating really good general-purpose components entails more work than creating components for a single organization or product. To create components that measure up to the gold standard of the built-in HTML elements, your component will need to be useful right out of the box, work in a wide variety of circumstances, be composable into other components, and more.