¿Qué ventaja tiene el uso de componentes web sobre los complementos de jQuery?

1) Código repetitivo. jQuery agrega 84 KB al tamaño de la página. Gran parte de eso es código que iguala las diferencias entre los navegadores y agrega soporte para métodos que ahora tienen soporte nativo en todos los navegadores web. Ver: es posible que no necesites jQuery

Una vez implementado en todos los navegadores, Web Components no requerirá una biblioteca adicional para funcionar.

2) Importación. Los componentes web no son solo sobre JavaScript. Con las importaciones HTML, puede importar componentes que consisten en elementos personalizados, incluido su marcado (plantilla), scripts y estilos.

3) Interoperabilidad. Los complementos de jQuery a menudo no son fáciles de trabajar entre sí. Piense: ¿cómo puede usar jQuery UI Datepicker dentro de un Handsontable? JQuery grid editor o DataTables | ¿Complemento de tabla para la celda jQuery? Esto está lejos de ser trivial, porque cada complemento tiene su propia API arbitraria que otros deben conocer. Con Web Components, el DOM es la API, lo que hace que dicha integración sea tan fácil como poner un elemento HTML dentro de otro.

4) Para configurar un complemento jQuery, generalmente necesita colocar algún contenedor

en su código, así como inicializar el complemento en él $("div").myPlugin() . Con Web Components solo necesita poner una etiqueta HTML en su código, ya que se inicializa automáticamente.

Esto es especialmente útil cuando inserta instancias de componentes web dinámicamente como resultado de la solicitud de AJAX o la interacción del usuario. ¡No más códigos de inicialización!

5) Los complementos de jQuery a menudo agregan un marcado excesivo a su documento, lo que puede causar conflictos en las clases CSS y las ID de elementos. Los componentes web usan Shadow DOM, lo que significa que todo el marcado adicional está oculto del alcance del documento principal.

Recientemente escribí una pieza más larga comparando componentes web con jQuery: página en starcounter.com

Hay al menos varias diferencias con seguridad.

1) No requerirá ninguna dependencia una vez que los navegadores la implementen por completo. A diferencia de los complementos de jQuery -> jQuery

2) Le permite encapsular por completo su funcionalidad y dependencias, de forma muy similar a un iFrame pero sin el cruft. No más colisiones de nombres con otros complementos o versiones conflictivas de jQuery.

3) Los componentes web le permiten incorporar otras piezas de HTML de forma declarativa con una etiqueta de enlace en lugar de tener que configurar una llamada ajax

4) ¡Shadow DOM te permite ocultar todo el marcado en una sola etiqueta!

en lugar de un montón masivo de divs y tramos

5) Configuración declarativa a través de atributos !!!:

6) Puedes construir tus propias API de una manera más vana.

Esto nunca terminaría …
Te animo a que vayas a WebComponents.org para obtener más información.