XHTML，或者更准确地说是 XHTML 1.0，是一种基于 XML 的标记语言，旨在在网页设计中取代HTML 4.01。它由 W3C 推出，其规范在2000年1月成为官方的推荐标准。XHTML1.0实际上是HTML 4.01的严格版本，并要求开发者遵循更加严格的语法规则——XHTML基于XML，它对标记的正确性有更高的要求：

• XHTML 元素必须被正确地嵌套。

• XHTML 元素必须被关闭。

• 标签名必须用小写字母。

• XHTML 文档必须拥有根元素。

• XHTML需要开发者在文档开头声明正确的DOCTYPE，而在实际的实践中，由于历史原因和混乱的标准，很多时候开发者并没有遵循正确的声明，导致页面以兼容模式而不是标准模式渲染。

• 为了正确地作为XHTML传送，Web服务器需要设置MIME类型为application/xhtml+xml。不幸的是，一些浏览器对这种MIME类型的处理不理想，这使得开发者们更倾向于使用更通行的text/html，这实际上使XHTML变成了浏览器中被当作HTML解析的标记语言。

自定义元素通常使用 customElements.define() 方法在 JavaScript 中注册，这样，当元素被添加到 DOM 时，就会与一个 JavaScript 类关联起来。这个类继承自 HTMLElement，允许它具备 DOM 接口的所有特性，并添加自定义的逻辑和样式。这意味着自定义元素不仅仅是形式上的定制，而是实现了真正的封装和功能拓展。

2011年，Alex Russel首次提出了Web Components的概率并首次演示了demo，这时候整套技术包括三个方面：scoped css，shadow DOM和Web components。W3C也在此时开始推进Web Components规范。

2012年，HTML Template很快被实现，作为wr服务器托管网apper包裹内容，在页面加载时不使用，在之后运行时实例化。同时Shadow DOM V0标准发布并被实现，并且Ember和Angular开始计划支持Web Components，甚至基于它去做改造，但最终没有结果。

至2018年，Web Components在主流浏览器中均被支持，但是并未达到普及程度，具体参看：https://caniuse.com/?search=Web%20Components%20

Vue在 Custom Elements Everywhere 测试中取得了 100% 的分数。在 Vue 应用中使用自定义元素基本上与使用原生 HTML 元素的效果相同！

Vue 提供了一个和定义一般 Vue 组件几乎完全一致的 defineCustomElement 方法来支持创建自定义元素。这个方法接收的参数和 defineComponent 完全相同。

import{defineCustomElement}from'vue'
constMyVueElement=defineCustomElement({
//同平常一样的Vue组件选项——正常的Vue组件选项都有
props:{},
emits:{},
template:`...`,
//defineCustomElement特有的：注入进shadowroot的CSS
styles:[`/*inlinedcss*/`]
})
//注册自定义元素，注册之后，所有此页面中的``标签都会被升级
customElements.define('my-vue-element',MyVueElement)
//你也可以编程式地实例化元素（必须在注册之后）：
document.body.appendChild(
newMyVueElement({
//初始化props（可选）
})
)
//也可以直接使用
exportdefaultdefineComponent({
setup(){
return()=>()
}
})

这样用，是不是非常爽！

Google 从 2013 年开始一直在持续推进的基于 Web Components 封装的类库，同时还开放了基于 Polymer 开发的组件集合PolymerElements GitHub和开发周边。 2015 年 Google 正式发布 Polymer 1.0 ，注意时间点，当时还是Custom Elements v0 版标准 2017年Custom Elements v1 版标准在各大浏览器落地，Polymer 发布了 2.0，并且不再封装 Custom Elements API，不再默认使用shadowDOM、目标兼容各种框架，开始变成轻量级类库。

• 由于起步几乎最早以及 google 背书，可能到现在也是影响用户数最大的 Web Components 基础库，Youtube 基于Polymer 对整站做了重构，Google 很多产品包括 Android 和 ChromeOS 平台也都用了 Polymer。

但个人觉得总体上相比与彼时流行的其他框架 Polymer 还是不温不火，Google 似乎也有同感、随着 Polymer 的轻量化升级，于是在 2018 年又发布了更现代化的 litGitHub – lit/lit: Lit is a simple library for building fast, lightweight web components.包括 lit-html 模板渲染库lit/packages/lit-html at main lit/lit GitHub和基于 lit-html 的 lit-element lit/packages/lit-element at main lit/lit GitHub创建 Web Component 的 base class 。 Lit-html 基于 ES 的模板自变量和 template 标签，用注释节点去动态填充，没有JSX 转换虚拟 dom的过程，把大部分模板创建渲染的事都交给浏览器去做，提供了轻量的 api 让我们可以在 JS 中写 HTML-Templates。 Lit-Element 的 Reactive properties 、Scoped styles 等面向现代化 JS 语法的特点让他现在很受欢迎。 Google 推荐新用户使用 lit，但也将 Polymer 推到了 3.0 版本，放弃了 HTML Imports 转向 JS modules，并且支持 Polymer 跟 lit 混用，目前持续又维护和支持，Slack Channel上一直很活跃。

除了 Google 自己， 微软的 PWA staterGitHub – pwa-builder/pwa-starter: Welcome to the PWABuilder pwa-starter! Looking to build a new Progressive Web App and not sure where to get started? This is what you are looking for!，选择 lit 框架和 封装的 Web Components 作为基础库。 Adobe 基于 LitElement 封装并开放了Spectrum Web ComponentsSap 基于 Lit-html 封装并开源了ui5-webcomponents/02-custom-UI5-Web-Components.md at master SAP/ui5-webcomponents GitHubRed hat GitHub – 1-Platform/op-components: One platform component library.等众多公司使用了 lit 开发自己的组件库或平台。

另一个类库GitHub – skatejs/skatejs: Effortless custom elements powered by modern view libraries.也是基于 lit-html 的。

XHTML，或者更准确地说是 XHTML 1.0，是一种基于 XML 的标记语言，旨在在网页设计中取代HTML 4.01。它由 W3C 推出，其规范在2000年1月成为官方的推荐标准。XHTML1.0实际上是HTML 4.01的严格版本，并要求开发者遵循更加严格的语法规则——XHTML基于XML，它对标记的正确性有更高的要求：

• XHTML 元素必须被正确地嵌套。

• XHTML 元素必须被关闭。

• 标签名必须用小写字母。

• XHTML 文档必须拥有根元素。

• XHTML需要开发者在文档开头声明正确的DOCTYPE，而在实际的实践中，由于历史原因和混乱的标准，很多时候开发者并没有遵循正确的声明，导致页面以兼容模式而不是标准模式渲染。

• 为了正确地作为XHTML传送，Web服务器需要设置MIME类型为application/xhtml+xml。不幸的是，一些浏览器对这种MIME类型的处理不理想，这使得开发者们更倾向于使用更通行的text/html，这实际上使XHTML变成了浏览器中被当作HTML解析的标记语言。

自定义元素通常使用 customElements.define() 方法在 JavaScript 中注册，这样，当元素被添加到 DOM 时，就会与一个 JavaScript 类关联起来。这个类继承自 HTMLElement，允许它具备 DOM 接口的所有特性，并添加自定义的逻辑和样式。这意味着自定义元素不仅仅是形式上的定制，而是实现了真正的封装和功能拓展。

2011年，Alex Russel首次提出了Web Components的概率并首次演示了demo，这时候整套技术包括三个方面：scoped css，shadow DOM和Web components。W3C也在此时开始推进Web Components规范。

2012年，HTML Template很快被实现，作为wr服务器托管网apper包裹内容，在页面加载时不使用，在之后运行时实例化。同时Shadow DOM V0标准发布并被实现，并且Ember和Angular开始计划支持Web Components，甚至基于它去做改造，但最终没有结果。

至2018年，Web Components在主流浏览器中均被支持，但是并未达到普及程度，具体参看：https://caniuse.com/?search=Web%20Components%20

Vue在 Custom Elements Everywhere 测试中取得了 100% 的分数。在 Vue 应用中使用自定义元素基本上与使用原生 HTML 元素的效果相同！

Vue 提供了一个和定义一般 Vue 组件几乎完全一致的 defineCustomElement 方法来支持创建自定义元素。这个方法接收的参数和 defineComponent 完全相同。

import{defineCustomElement}from'vue'
constMyVueElement=defineCustomElement({
//同平常一样的Vue组件选项——正常的Vue组件选项都有
props:{},
emits:{},
template:`...`,
//defineCustomElement特有的：注入进shadowroot的CSS
styles:[`/*inlinedcss*/`]
})
//注册自定义元素，注册之后，所有此页面中的``标签都会被升级
customElements.define('my-vue-element',MyVueElement)
//你也可以编程式地实例化元素（必须在注册之后）：
document.body.appendChild(
newMyVueElement({
//初始化props（可选）
})
)
//也可以直接使用
exportdefaultdefineComponent({
setup(){
return()=>()
}
})

这样用，是不是非常爽！

Google 从 2013 年开始一直在持续推进的基于 Web Components 封装的类库，同时还开放了基于 Polymer 开发的组件集合PolymerElements GitHub和开发周边。 2015 年 Google 正式发布 Polymer 1.0 ，注意时间点，当时还是Custom Elements v0 版标准 2017年Custom Elements v1 版标准在各大浏览器落地，Polymer 发布了 2.0，并且不再封装 Custom Elements API，不再默认使用shadowDOM、目标兼容各种框架，开始变成轻量级类库。

• 由于起步几乎最早以及 google 背书，可能到现在也是影响用户数最大的 Web Components 基础库，Youtube 基于Polymer 对整站做了重构，Google 很多产品包括 Android 和 ChromeOS 平台也都用了 Polymer。

但个人觉得总体上相比与彼时流行的其他框架 Polymer 还是不温不火，Google 似乎也有同感、随着 Polymer 的轻量化升级，于是在 2018 年又发布了更现代化的 litGitHub – lit/lit: Lit is a simple library for building fast, lightweight web components.包括 lit-html 模板渲染库lit/packages/lit-html at main lit/lit GitHub和基于 lit-html 的 lit-element lit/packages/lit-element at main lit/lit GitHub创建 Web Component 的 base class 。 Lit-html 基于 ES 的模板自变量和 template 标签，用注释节点去动态填充，没有JSX 转换虚拟 dom的过程，把大部分模板创建渲染的事都交给浏览器去做，提供了轻量的 api 让我们可以在 JS 中写 HTML-Templates。 Lit-Element 的 Reactive properties 、Scoped styles 等面向现代化 JS 语法的特点让他现在很受欢迎。 Google 推荐新用户使用 lit，但也将 Polymer 推到了 3.0 版本，放弃了 HTML Imports 转向 JS modules，并且支持 Polymer 跟 lit 混用，目前持续又维护和支持，Slack Channel上一直很活跃。

除了 Google 自己， 微软的 PWA staterGitHub – pwa-builder/pwa-starter: Welcome to the PWABuilder pwa-starter! Looking to build a new Progressive Web App and not sure where to get started? This is what you are looking for!，选择 lit 框架和 封装的 Web Components 作为基础库。 Adobe 基于 LitElement 封装并开放了Spectrum Web ComponentsSap 基于 Lit-html 封装并开源了ui5-webcomponents/02-custom-UI5-Web-Components.md at master SAP/ui5-webcomponents GitHubRed hat GitHub – 1-Platform/op-components: One platform component library.等众多公司使用了 lit 开发自己的组件库或平台。

另一个类库GitHub – skatejs/skatejs: Effortless custom elements powered by modern view libraries.也是基于 lit-html 的。