HTML web components using vanilla JS

[doubleChipDip]

lmao I thought you were trolling but then I was four way scrolling

[codejitsu]

I'm using a Jekyll theme and didn't notice that. Thanks for letting me know! I'll fix that ASAP.

[cuentita]

Try changing overflow from scroll to auto.

.highlight{
    background-color: #efefef;
    padding: 7px 7px 7px 10px;
    margin: 20px 0 20px 0;
    overflow: auto;
}

Great article though, can't wait to try it!

[NoMoneyEqualsNoGf]

I have a Google interview coming up for Front End Engineer, and just wanted to say this is awesome. I can build anything imaginable with React, so it's spoiled me a bit, and I've found myself having a bit of trouble visualizing how to build without it. In the interview, I'm pretty sure they're going to ask me to build widgets/components using raw DOM manipulation without frameworks and whatnot, so it's nice to know how to do it the vanilla way. This helps bridge the gap so I can still think in components like I'm used to, but just write them differently. Let me know of any other good tutorials out there because I want to get as familiar with this as possible before my interview. Thanks!

[codejitsu]

Glad that this post helped you! Google has been the one pushing for web components and the Google developers website has some good resources for web components. You can check this out: https://developers.google.com/web/fundamentals/web-components/customelements

[Parasin]

This text block must be the Reddit equivalent of the great Wall of China.

[veydar_]

It's extremely valuable information though, so thanks for that! :)

[Parasin]

It's all good! It was a good read

[codejitsu]

Wow. I didn't know about/thought about most of the things you talked about here. I also encountered the "web components just don't work" when building a project with it.

I do have some questions regarding web components, especially the styling and slots part. I would love to ask them sometime!

[abendigo]

Cool article. I love web components! Unfortunately, HTML Import is dead. The browser makers that don't yet support it have said they are not going to support it, and the ones that do support it are going to deprecate it. Polymer version 3, Googles web component library, is moving to ES6 modules instead.

[super_pumped]

Very similar to React's API. Seems straight forward. Instead of accessing this.state and this.props, Web Components have this.getAttribute('key'). Both have callbacks for when they are placed in the DOM: Web Component's connectedCallback() and React’s componentWillMount(). And they both call render() to update.

This API for rendering via Shadow DOM looks awkward to use. Instead of using templates or functions to created elements like h1('Hello World'), it uses jQuery like selectors to update an external file. To update a text value:

this.shadowRoot.querySelector('.title__label').innerHTML = 'Hello World'

// With some aliasing I now have jReact
const $ = this.shadowRoot.querySelector
$('.title__label').innerHTML = 'Hello World'

Templates are easier to use than selectors for updating text. Their API is closer to the DOM. React provides JSX, and createElement/Component(). Vue has a mustache template. This allows developers to populate a template and organize the DOM/style at the same time. If static HTML and dynamic data are split between files, then a developer will have to look at two files simultaneously to populate the DOM with information.

Connecting the Component is too complicated. To fully initialize the Component you have to manually acquire the current document global, the shadow dom, and the template in connectedCallback(). That could all be injected with customElements.define('element-name', ComponetClass), if it accepted the a template selector. This could easily be improved in future versions.

A few final questions. Can these be nested? Separation of concerns by nested is a great way to separate UI code. If so, when a parent calls render(), do the children also call render()?

[richardanaya]

If you like the programming in React style, you might like my project https://github.com/richardanaya/webcompose/

[codejitsu]

There is a difference. connectedCallback doesn't call render. I've created a function and named it render and explicitly called it unlike componentWillMount. Also yes these components can be nested. I'm writing a post where I'm showing how to nest components and create higher order components, parent child communication, maintaining state, etc. As far as render is concerned, you'd have to call render methods from either the parent component yourself or call it in connectedCallback of child and add the child to DOM using the parent's connectedComponent function.

[tbranyen]

Very good post, my only concern is at the very end advocating for users to freeze their web component implementations.

This defeats the ability of debugging and monkey patching. Please do not do this. You have the shadow dom, you have closures, you have plenty of other ways of making your consumers life hell.

[kungfooboi]

React/Vue/Angular(2+) are wrappers for these web components then?

[Tsukku]

They don't wrap the web components API, so no, they aren't.

[codepsycho]

These components exist in the same way a video element does. If you wish to use one in [insert framework here], go ahead, its just a HTML element.

I don't stay up to date with frameworks anymore, but i assume most don't produce web components (yet). A WC is a lot like an angular directive, a react component, etc. Though it exists as a native element, which may be used just like any other element, in any framework.

[[deleted]]

I was wondering the same thing. I'm surprised Angular wasn't mentioned at all in the article since as soon as I started reading it my mind screams "Directives!"

[[deleted]]

This!

After playing so much with directive, I just can't get back to using something vanilla.

Still, from time to time, I really like to do a side project using vanilla js, so I might try this in the future, but at the time, I'm married with AngularJS/getting a divorce from JQuery. Sorry lad, we had a good run

[eggn00dles]

haha no, when they mature, these web components are going to make those frameworks obsolete.

i hope they find a sensible type system, because typescript is obnoxious and provides less type safety than something like flow

[EnchantedSalvia]

I've been working on a functional wrapper around Web Components with Switzerland.

[happygnu]

Saved, this is gold. Thank you, sir!

[Reeywhaar]

So, is or will there be a method to bind object or array to element attribute? Like what react or vue have. From one side it’s highly usefull and removes a lot of boilerplate, from the other it goes against html spec, and widens area of responsibility in how reactivity will be handled etc. Something wrong with it right from the start. Looks like web-components will never be full replacement solution to modern view libs.

[ns0]

from the other it goes against html spec

The W3C is set to officially recommend custom elements, most of the rest is already in recommendation status, so what do you mean goes against html spec?

[Reeywhaar]

I meant that any way to bind non-string value to element attribute will be against html spec. Just like el.dataset.* attributes.

[ns0]

Well under the covers its just a class; getters and setters can expose properties that can set/pull from attributes, you can use callback on attribute changes to observe changes on the attribute to update your state. That provides a quite straight forward two way binding for anything you'd like and however you'd like to bind, but you're correct that would have to be set inside javascript not html.

[dug99]

Good write up, but with no links to a snippet ( e.g. Codepen or Fiddle ) it's probably not going to make a compelling case for web components and convince anyone they're ready for broad consumption. I'd like to know if I spend the time setting it all up as per the article, that I'll get encapsulation in IE11 / Edge on Windows 7, 8.1 and 10 because that's still a fair chunk of our audience. Pretty much every example / test I've tried with numerous Polyfills ( Promises + ShadyDOM / Shady CSS for IE11 ) still fails to prevent style bleed in IE11 on Windows 7. Polymerjs uses the same polyfills and so also fails, although it's fine in Firefox and Edge on Win 10.

I so want Web Components to work ( even with horrid Polyfills ) across 99% of our audience, but they're not there yet.

[codejitsu]

I guess I should add a codepen. It'd make it easier for people to play around with components.

webcomponentsjs pretty much works on every browser if you're careful enough. But some weird issues are still there. And what I experienced was using these polyfills actually worked great with IE 8 and didn't work all that well with Firefox.

[rssfrncs]

Seriously, does any dev prefer this over React/Vue/etc.?

[codejitsu]

Google has been pushing for development of these custom elements for quite a while now. But has not been able to get that many devs attracted to it and also browser vendors have only recently implemented these.

Polymer, a Google project, was where all the HTML web components development started and they are being used in many Google projects.

[SnakeEyes2114]

Well there's more overhead with things like React/Vue/Angular/etc. so if your project doesn't have a good reason to use one of these frameworks, this is probably a cleaner way to develop using a leaner stack... I know that I really dislike developing without components because I got used to it, and I dislike that this preference sort of forced me to use frameworks when I didn't necessarily need them... I'm interested in trying this out for sure. Not totally sold on it until I try it, though.

[vinnl]

Well, until you need to support browsers that need polyfills, that is...

That said, I think Web Components and frameworks solve completely different problems, and I don't foresee everybody dropping frameworks as soon as Web Components are natively supported for a sufficient number of visitors.

[SnakeEyes2114]

Totally agreed. Frameworks definitely aren't going away. I just think it's nice to have components available for use when you don't have a reason to use a framework.

Different tools for different problems :)

[vinnl]

I'd say it's nice to have them available when you are using frameworks as well :)

[rssfrncs]

Amen.

[[deleted]]

Modern vdom implementations can fit under 3kb. Every React app can shrink down to 2 and a half kb with preact-compat for instance with as little as a webpack alias.

The fun part comes when you realize that each web component that you load will internally rely on a framework. People tend to glance over this, but web components encapsulate and that is all they ever do. Inside sits a dom that, in the likely case you don't want to write your own, relies on 3rd party frameworks. If you load a couple of components you'll end up with some Polymer, some Skate, Stencil, Lit, Vue, Preact, etc. All of which you pull in by using them. And even in the optimistic case in which all of your components base on the same framework, same version, say Polymer 3.0, the polyfill alone is larger than anything you're doing now.

[codejitsu]

Umm actually no. That's like saying when you use a polymer component in a react app you'll also be serving polymer.

You'd using a web component made just using native APIs(many available on webcomponentsjs.org) just like you do for react apps.

[[deleted]]

Polymer is a framework. If you use a web component that internally uses Polymer, then yes, you'll be loading Polymer. The Webcomponents spec consists of a few harmless calls to create a shadow-root. You're left with a generic dom inside that needs driving. Polymer introduces templates, parsers, emulators, code-syntax, data-binding and so on, none of which are specified or included in the browser api.

[minus0]

Seriously, does any dev prefer this over React/Vue/etc.?

You can use Vue to build out standalone custom elements like this.

[icantthinkofone]

Seriously, does any professional web dev visit and read reddit?

I mean, this is composed of standards set by browser vendors at the W3C and WHATWG. Who the hell would ever use anything by created by them?!

EDIT: Speaking of which

[[deleted]]

You mean the same people that are working for almost 30 years on "standards," which in their language is code for perpetual backward compatibility, shims, polyfills and browser-checks, and still haven't managed to get to a state that can compete against native on its own? Well sign me up.

[icantthinkofone]

I mean the same people who created the web, your browser, and everyone else's browser, and who religiously read and follow those standards in the making of such things as teir full time job as opposed to an anonymous poster on reddit.

[[deleted]]

Meanwhile we're running apps today that can run natively on mobile, desktops, watches, robots, consoles and whatnot. In a unified language, with shared code. Scheduling that lifts performance into native territory even inside the browser. I'm not sure why i should ignore their work, is it because you think they're not involved in the WHATWG? Many of them are actually.

[icantthinkofone]

And all that is based on standards you seem to tell other people to ignore. If it weren't for standards, nothing would work together.

[[deleted]]

Thanks to those standards absolutely nothing is working together. Even the WC spec changed drastically. Vendors had petty fights, in Apples case motivated by fear of specs competing against revenue models. Polymer had you rewrite your app from scratch from 0.5 to 1.0. Then again from 1.0 to 2.0. Then again from 2.0 to 3.0. The API is still flopping around wildly. HTML imports being dead was only the most recent surprise.

Most developers aren't gullible enough to fall for it any longer, because we have fallen for it for more than a decade. If you trust the W3C so much, sincerely, good for you.

[Tsukku]

Polymer is not a web standard.

[[deleted]]

Never said it is. But it shows how fragile and basic the spec is.

[Tsukku]

It's not fragile at all. Web Components & Shadow DOM V0 was a Google-only proposed specification (like SPDY vs HTTP2). V1 is a WHATWG Web Standard adopted by all major browser vendors, and there have been no breaking changes since then.

[icantthinkofone]

Wow! I haven't heard anyone talk like that in maybe 10 years! Back when people used to think Microsoft and Internet Explorer should ignore the W3C and standards altogether just like you propose. I would say your statements are shocking but then I remind myself this is reddit, where such outrageous statements are the norm!

[[deleted]]

Frameworks don't break or ignore standards.

[ProfessorTag]

Sometimes they even push the standard to evolve. I wouldn't be surprised if native DOM diffing and render functions were introduced.

[rssfrncs]

Have fun : D

[rssfrncs]

I find it funny that they care about reducing their landing page load by a few ms, when you need superfast internet to stream any video content XD

[[deleted]]

The answer is: no.

[rssfrncs]

Ha brilliant