office 2003 web components下载，webcomponents.exe安装包

1.为什么要讨论这个话题呢？主要是Google团队推出的Lit框架以及React 19的一些优势支持了Web Components。

React 19 支持Oxc 解析器性能提高21%。 ESLint 9 beta 版本已经发布。

前端动态Lit 3.0 已发布。再见IE，你好TC39 装饰器！

现在React/Vue框架已经稳定了，作为开发者，我们在启动项目时常常会犹豫选择技术栈。你应该选择当前主流且可靠的React/Vue，还是更轻、更时尚的Svelte或Solid？还是老派的服务器框架或HTMX？

下面是一个构建博客的示例，解释了原因。

当我选择构建博客时，我考虑过使用React，但往往经过深思熟虑后，项目的限制决定了技术的选择。我们来谈谈为什么。

长期写博客的同学可能有在不同技术栈之间切换的经历。在此之前，它可能是由Astro 建造的。 Hugo 在此之前，可能是WordPress。

在切换博客技术的过程中，将所有内容保存为Markdown 文件意味着您可以简单地将其从一个系统导出并导入到另一个系统中，从而降低兼容性或消除一些不兼容性。便携式内容。博客系统操作简单。

不幸的是，大多数网站建设者都有自己的某种语法糖，Astro 也不例外。 MDX 允许您将Astro 组件集成到Markdown 文件中。这些组件可以使用Astro 构建系统的所有功能，允许您在单个文件中编写HTML、CSS 和JS，Astro 会自动提取和优化所有内容。它还限定CSS 选择器的范围、编译TypeScript、允许有条件地渲染标记，以及执行各种其他高级功能。

当然，缺点是这一切都只在Astro 中有效。切换到另一个网站构建器需要重写这些组件。您可能需要拆分HTML、CSS 和JS，配置新的构建系统，或找到新的样式范围。因此，Astro 特有的功能无论多么方便，都不受限制。

然而，Markdown 的优点是它允许你编写HTML。这意味着您想要添加的任何精美的交互式图表都与Markdown 的其余部分一样可移植，只要它们可以用纯HTML 标签表达即可。

Web 组件满足了这种需求。这些是一组用于构建可重用HTML 元素的W3C 标准。要使用自定义元素，请创建一个类，注册一个标签名称，然后在标记中使用它。这是编辑器的代码：

网页组件

将所有HTML、CSS 和JS 封装在一个文件中，不需要构建系统。开发人员可以将组件的所有代码集中在一个地方，为开发人员创造更好的体验，并显着减少心理负担。尽管Web 组件不像Astro 或Svelte 那么容易创建，但它们仍然非常有用。

如果您不熟悉Web 组件，请参阅上文。

组件代码

import PixelEditor from \’./PixelEditor.js\’;class PixelArtDemo extends HTMLElement {constructor() { super(); this.shadow=this.attachShadow({ mode: \’close\’ }); || 100; const size={ w: 分辨率， h: 分辨率}; const alice=new PixelEditor(this.shadow.querySelector(\’#alice\’), size);大小); alice.debug=bob.debug=this.hasAttribute(\’debug\’); } render() { this.shadow.innerHTML=`

`; }}customElements.define(\’pixelart-demo\’, PixelArtDemo);Web 组件的另一个好处是Shadow DOM。

，将组件与周围的页面分开。当您想要在应用程序的组件或其他部分之间共享样式时，Shadow DOM 往往很笨重，但当您确实想要将所有内容保持独立时，它就非常有用。与图像和视频一样，这些组件无论在何处使用，其外观和行为都相同。

Web 组件还可以公开属性，以便可以在外部进行配置。

另一种选择是使用vanillaJS。有一些框架可以编译成Web 组件，最著名的是Lit（尽管我更喜欢称其为库），还有Stencil、Svelte 等。两者都是很棒的工具，但框架是依赖项，而依赖项需要权衡。在这种情况下，最大的问题就是维护。

这也适用于TypeScript。 TypeScript 过去15 个版本发生了重大变化，虽然我们喜欢TypeScript，但它仍然是一种依赖项，而不是Web 的原生基础。

使用依赖关系的成本很高。随着新版本的发布和API 的更改，需要花费时间和精力来确保您的代码与它们兼容。而且这个成本会随着时间的推移而累积。

回顾20 多年的Web 开发，我们见证了jQuery 的诞生、兴起和衰落。 Node.js 被创建，分叉为io.js，并与Deno 和Bun 一起合并回Node.js。 Backbone 爆炸式增长并很快被AngularJS 取代，然后是React 和Vue，以及Lit、Astro、Svelte 和Solid 等新兴框架的出现。 jQuery 4.0.0 来了；Rsbuild 0.4 正式发布；轻量级强大的语法高亮工具Shiki v1.0 发布。

但是，尽管周围的生态系统不断发生变化，但网络平台本身却保持着令人惊讶的稳定。这主要是因为标准管理员努力确保新的更改不会破坏现有站点。例如，1996 年的原始网站《Space Jam》 仍然很著名，并且在现代浏览器中完美显示。

2. 2024 年的Web 组件W3C Web 组件社区小组于2024 年召开了一次现场会议，讨论Web 组件的标准和平台相关的改进。

2.1. 在关于Declarative Shadow DOM (DSD) 的最新消息中，Firefox 已批准于2 月20 日发布的版本123，以支持Declarative ShadowDOM。此时，所有现代浏览器都将支持声明式ShadowDOM。重要通知。请尽快迁移至NPM淘宝镜像新域名。对于Web 开发人员来说，Firefox 可以满足您的需求。

对于那些不熟悉DSD 的人来说，它是在HTML 中创建Shadow DOM 而无需编写JavaScript 的新标准。声明式Shadow DOM 支持许多有趣的应用场景。

具有完全封装样式和基于插槽的配置的伪自定义组件。无需JavaScript。

无需JavaScript 即可流式传输无序延迟内容。

改进了HTML 中语义和表示目的的声明性分离。

服务器渲染的Web 组件的标准输出。

从全球CSS 技术转向性能更高的模块化CSS 的改进路径。

改进了向更现代、面向组件的HTML 架构的迁移路径。

一种新的渐进强化方法。

2.2. 检测CSS Slot 内容在构建Web 组件或使用Shadow DOM 时，您经常需要根据特定内容是否插入到特定位置来更改样式。例如，想象一个按钮组件，其内部间距需要根据按钮是否插入到图像中而改变。目前，您可以通过向slotchange 事件添加事件侦听器并根据allocateNodes() 更改样式来实现此目的。

由于这种情况非常常见，因此Web 组件CG 一直与CSS WG 和浏览器供应商合作，通过支持基于槽状态的样式的新的完全声明性机制来扩展CSS。

CSS 中有很多方法可以解决这个问题，包括使用组合器和伪选择器。组合器功能更强大，但也会带来严重的复杂性和性能问题。考虑到这一点，该组织似乎更倾向于一种更简单的方法，即使用范围非常窄的伪选择器，并且可以更快地部署且风险更小。

该小组正在跟进W3C 的后续步骤，根据这些讨论制定正式规范。

2.3. 范围元素注册表目前，所有自定义元素都是在HTML 中全局定义的。这对于许多网站和中小型应用程序来说没问题，但对于大型模块化应用程序、迷你应用程序、微前端和其他更复杂的用例来说就成了问题。为了满足这一需求，建议能够创建组件范围的注册表并将其与影子DOM 关联起来。

幸运的是，去年年底，范围注册表功能在Chromium 中成功原型化。这澄清了一些悬而未决的问题和重要细节。 CG 同意下一步是根据从原型中吸取的经验教训来更新规范，并在其他浏览器中构建进一步的原型。我们正在积极招募人员来实现这一目标，并且我们已经有了从事跨浏览器工作的志愿者。

2.4. ARIA Mixin Elements 随着2023 年10 月Firefox 119 的发布，所有主要浏览器现在都通过ElementInternals 支持ARIA Mixin 字符串反射。这意味着可以通过ElementInternals 设置基于字符串的ARIA 属性，而无需在元素主机上手动创建属性。这会清理HTML 并允许组件使用者使用自己的设置覆盖默认ARIA 设置。

最后，到2024 年，将开发更多的Web 组件，因此作为开发人员，您可以期待更多。在为您的项目选择技术时，无论是使用Web 组件还是主流框架React/Vue，请考虑项目的背景、团队成员的技能水平、技术栈的开发情况等。我们建议您进行评估从各个方面。