Web Components in the Real World (Part 2)

More than a year has passed since my publication "Web Components in the Real World" and I have accumulated new observations of what is still wrong with this technology. Perhaps these points will allow someone to avoid a dead end for their projects.

_{Photo by Brandon Molitwenik on Unsplash}

Broken HTML

HTML has many useful features that allow you to implement functionality without using JavaScript. One of these features is the ability to submit a form by pressing the Enter key in any input field. Here's an example:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <button>Send!</button>
</form>

We enter the text, press Enter, the data is sent to the server, no JavaScript. If desired, you can avoid reloading the page and send data via AJAX, but in this case the amount of JS will be minimal.

Now let's try to replace a regular button with a web component:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <my-button>Send!</my-button>
</form>

The web component my-buttoncontains the same button inside itself, there are no visual differences. But submitting the form by pressing Enter broke! Here is a demo , you can see for yourself.

? -, . , . , : Javascript, , -. , - 8 , production-ready.

, -. HTML , label. , , . -! :

<label>First name: <input type="text"></label>
<label>Last name: <my-input></label>

, input "First name", "Last name" - . ! 2 , . – label input . , ? , - -, - ( , ShadowDOM).

CSP

" , ". CSP – , . CSP <style></style> , <link rel="stylesheet"> (, style- , 'unsafe-inline', , ).

-? , ShadowDOM , , ShadowDOM style-, CSP. - : Stencil () LitElement ().

– Constructable Stylesheets API, ShadowDOM unsafe-inline. – CSP, -.

Lifecycle-

, . , ( material-web-components):

<my-menu>
    <my-menu-item />
    <my-menu-item />
</my-menu>

- . connectedCallback. - DOM . , . :

class MyMenu extends HTMLElement {
    connectedCallback() {
        console.log('my menu')
    }
}

class MyMenuItem extends HTMLElement {
    connectedCallback() {
        console.log('my menu item')
    }
}

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

, :

"my menu"
"my menu item"
"my menu item"

connectedCallback , . , . , :

"my menu item"
"my menu item"
"my menu"

? my-menu ? HTML ,

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

// 
customElements.define('my-menu-item', MyMenuItem)
customElements.define('my-menu', MyMenu)

, connectedCallback. , , . " " , window.setTimeout . " " , . -

The web component will not be able to stop rendering of the spoiler internals. By the time the component is activated, internal images will already start loading and consume your traffic, even if you didn't want to open this spoiler.

conclusions

There are rakes scattered all over the web components, well sprinkled with Google marketing. There are still many unresolved issues in the standard that can prove to be an insurmountable obstacle to your projects. It would be helpful to know about potential pitfalls in advance in order to make a more informed decision whether to use web components and frameworks based on them, or stay with the simple old HTML / JS / CSS approach. Hope this article was helpful, thanks for reading!