idea2app用户770
Web components 标准的历史、现状与破局
输入“/”快速插入内容
Web components 标准的历史、现状与破局
Web components 标准的历史、现状与破局
用户770用户7702024年11月1日修改
2024年10月31日创建
30
38
0
0
历史源流
现状分析
😥
知者不多，用者更少
1.
面向对象在前端码农的推广受阻
Web components 主要扩展了 DOM API，把浏览器内置原生标签的创建能力暴露给 JavaScript。DOM 全称文档对象模型，面向对象也是用户界面开发的基本模式（人面对具象事物时的思考方式就是分类化、对象化的），因此新 API 自然需要从浏览器内置的 HTML(Something)Element 这些基类继承出自定义标签的实现类，必然会用到 ES 6+ 的 class 语法。
代码块
<template>
<style>h1 { color: red; }</style>
<h1>
Hello, <slot>World</slot>!
</h1>
</template>
<script>
const { content } = document.currentScript.previousElementSibling;
class MyComponent extends HTMLElement {
constructor() {
super().attachShadow({ mode: 'open' }).append(content.cloneNode(true));
}
}
customElements.define('my-component', MyComponent);
</script>
<my-component>Web components</my-component>
2.
常见 Web components 框架设计失误
能学好上述标准 API 的前端码农已经不多了，而以 Google Polymer/Lit 为首的 Web components 框架们还要把原生 API 再包装一层，那与 Angular、React、Vue 之流有何区别？生产环境中都不直接用原生，那我干嘛还要再多花一倍时间去学原生呢？所以就只有各大框架的开发者来把它用作底层隔离环境，一线码农根本不会去学。
代码块
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
export class XCustom extends PolymerElement {
static get template() {
return html`<h1>Hello, Polymer v3 !</h1>`;
}
}
代码块
import { LitElement, html} from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
render() {
return html`<p>Hello, Lit v3 !</p>`;
}
}
代码块
import { Component, Element, h } from '@stencil/core';
@Component({
tag: 'my-component',
shadow: true,
})
export class MyComponent { // 这个类甚至都不是个 HTMLElement 实例……
@Element() element: HTMLElement; // 类组件 HTMLElement 实例要用装饰器注入
render() {
return <div>Hello, Stencil v4 !</div>;
}
}