DEV Community

Cover image for Webcomponents: It's really that easy!

Webcomponents: It's really that easy!

neoan on January 11, 2020

It was 2015 when I first heard about webcomponents, custom elements and the mysterious shadow dom. Browser support was - well - let's call it exper...
Collapse
 
justinfagnani profile image
Justin Fagnani

What is the purpose of using a <template> in your example? You never clone it, you're just getting it's innerHTML as a string. This makes it a very expensive string holder.

You could simplify what you have to roughly this without the template:

export class AllCaps extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        let toUpper = this.firstChild.nodeValue.toUpperCase();
        this.shadowRoot.innerHTML = `
          ${toUpper}
          <slot></slot>
          ${this.getAttribute('addition')}
          <style>
            :host{
             color: red;
            }
          </style>
        `;
    }
}
Enter fullscreen mode Exit fullscreen mode

But not that with both a <slot> and copying the text content, you'll be displaying the content twice. You're also reading the attribute in the constructor, but it may not be set there yet.

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

Or maybe simplify it to:

<all-caps>this is uppercase</all-caps>
<script>
  customElements.define("all-caps", class extends HTMLElement {
    constructor() {
      const toUpper = x => x.firstChild.nodeValue.toUpperCase();
      const style = "<style>:host{color:red}</style>";
      super()
        .attachShadow({mode: "open"})
        .innerHTML = style + toUpper(this);
    }
  })
</script>
Enter fullscreen mode Exit fullscreen mode

comming back 2 years later

There is a bug in all replies code! There is no DOM available in the constructor when the Web Component is defined before being used in the DOM

Collapse
 
sroehrl profile image
neoan

Yes, you are absolutely right. As mentioned in several disclaimers throughout this post, this is not the structure you would go for. This example element is meant to introduce several concepts and by no means represents an actual custom element.
I carefully chose this setup to accommodate for progression throughout this tutorial and made some crude decisions to maintain overview yet somewhat of a separation.
As I am also concerned about potential readers imitating such a pattern: do you think I haven't mentioned used anti-patterns enough, or is your feedback only based on the actual code snippets?

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

What is the best framework to use with Web Components? Perhaps even something like SnowPack? Or perhaps, Webpack or Parcel.js?

Today we can assume that webcomponents will be dominating the web and slowly push out performance intensive frameworks like Angular.

Actually, I hope that HTML/CSS/JS will all die. Only backend compilation to WebAssembly remains.

But in reality, at least HTML will probably survive.

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

I started with Z80 assembly in 1979

If assembly languages were better we would never have had BASIC, Turbo-Pascal, Delphi, ActionScript, PHP, Go, Python, and name them all

The best Web Components learning track is to start with native.

  • You don't become a head chef by buying canned soup.
  • You don't become a master painter by coloring in numbered squares.

Learn what food is, learn what paint is, learn what Web Components are

Frameworks and Libraries like Lit, are tools to help you produce faster, not better,

Collapse
 
yurikaradzhov profile image
Yuri Karadzhov

You can try hqjs.org server. It works with web components as well as with different frameworks and metalanguages as typescript and scss

Collapse
 
sroehrl profile image
neoan • Edited

Thanks. But I run these with neoan3 as this

  1. Gives me the possibility to generate the skeleton of a new custom element via cli

  2. Allows me to use server side variables with ease

  3. Provides me with a unified system when developing API/backend

  4. Serve/use without building process or development server

Edit: sorry. I now realize that your suggestion is targeted at somebody else.

Thread Thread
 
yurikaradzhov profile image
Yuri Karadzhov

It was, but in any case you have to have server to deliver your code. hqjs.org is the server that avoid bundling and ensure that you browser get as little code as possible to run your app. It might not suite if you want to serve your app let's say from github, but can do the trick in m any other cases.

Thread Thread
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

Looks interesting. In the past, I used Stencil.js, though. Might be replaceable with hqjs, (with jsx-to-html converter, just to avoid long html strings).

aloud-comments.web.app/

Collapse
 
sroehrl profile image
neoan

HTML/CSS & JS will all survive for the time being. But yes, WebAssembly will make the same path I outlined here. Right now it's a little "clunky" to use, but that will change and will surely expand the web in a way never seen possible. What Google started with ChromeOS might progress into the next logical step: PCs will become simple "Internet terminals" and everything will be available through what we call a browser today.

As for the framework question: As mentioned, I like it simple and small. Since I personally work a lot backend, lit-html and axios is all I need to fulfill my needs.

Collapse
 
somedood profile image
Basti Ortiz

Surprisingly enough, you were indeed right about Web Components being "easy". Thanks for the neat introduction! I'll definitely start on a toy project for experimentation.

Collapse
 
sroehrl profile image
neoan

Thank you! This is exactly what I intended for the reader to take away from it.