DEV Community

Discussion on: scoped-style

 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 • Edited

Good questions. Nothing you're asking here comes off as a knock. It's really nice for me to see developers who might not have heard much about these powerful new standards engaging with them.

Polymer? Web Components? Polyfill?

Polymer Project is the Google team which initially proposed the new standards and shepherded them through the standards process. They also wrote and maintained the polymer library, which is a specific implementation of web components.

Five years ago, the only way to polyfill the standards was with the polymer library. Today, you can npm i -S @webcomponents/webcomponentsjs to get the polyfills - no need to include polymer.

So point No. 1: you don't need to (and even probably shouldn't) use Polymer library to make web components. Also, now that the standards are established and implemented, it's not like Google can just cancel them like inbox or hangouts.

But isn't Shadow DOM for Web Components only?

Now, Shadow DOM is only one of the four standards that we collectively refer to as "web components". It's very likely that you'll most often want to attach a shadow root to a custom element in it's constructor (or via a library that does same), but you don't have to. <input> has a shadow root. So does <video>. You don't have to use custom elements to use Shadow DOM.

It's also likely you'll want to use the template element to stamp DOM into that shadow root (or use a library that does same), since it's way faster than innerHTML, but you don't have to use template to use Shadow DOM. You can just attach a shadow root to some div then append existing DOM to it, if you want. You could also render your react app into that shadow root if you wanted. (Although, for half the ticket price, you might as well just use custom elements in such a case)

So the web components standards work well together, but don't require one another.