Composants Web dans le monde réel (partie 2)

Plus d'un an s'est écoulé depuis ma publication "Composants Web dans le monde réel" et j'ai accumulé de nouvelles observations sur ce qui ne va toujours pas avec cette technologie. Peut-être que ces points permettront à quelqu'un d'éviter une impasse pour ses projets.

_{Photo de Brandon Molitwenik sur Unsplash}

HTML cassé

HTML a de nombreuses fonctionnalités utiles qui vous permettent de mettre en œuvre des fonctionnalités sans utiliser JavaScript. L'une de ces fonctionnalités est la possibilité de soumettre un formulaire en appuyant sur la touche Entrée dans n'importe quel champ de saisie. Voici un exemple:

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

Nous entrons le texte, appuyez sur Entrée, les données sont envoyées au serveur, pas de JavaScript. Si vous le souhaitez, vous pouvez éviter de recharger la page et d'envoyer des données via AJAX, mais dans ce cas, la quantité de JS sera minimale.

Essayons maintenant de remplacer un bouton normal par un composant Web:

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

Le composant Web my-buttoncontient le même bouton à l'intérieur de lui-même, il n'y a aucune différence visuelle. Mais soumettre le formulaire en appuyant sur Entrée a échoué! Voici une démo , vous pouvez voir par vous-même.

? -, . , . , : 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 . " " , . -

Le composant Web ne pourra pas arrêter le rendu des composants internes du spoiler. Au moment où le composant est activé, les images internes commenceront déjà à se charger et consommeront votre trafic, même si vous ne vouliez pas ouvrir ce spoiler.

conclusions

Il y a des râteaux dispersés dans tous les composants Web, bien saupoudrés de marketing Google. Il existe encore de nombreux problèmes non résolus dans la norme qui peuvent s'avérer être un obstacle insurmontable à vos projets. Il serait utile de connaître à l'avance les râteaux potentiels afin de prendre une décision plus éclairée s'il faut utiliser des composants Web et des frameworks basés sur eux, ou rester avec l'ancienne approche simple en HTML / JS / CSS. J'espère que cet article vous a été utile, merci d'avoir lu!