640: Navigating the Pros and Cons of Web Components
00:00 Share

嗨，听着，还有很多事情，就像你听另一个披萨谈话一样，我过得很好，但我下周要去一个地方。

事情开放了，应该成为我今年最后一次会议上看到的东西。理论上，被邀请参加这样的活动是很好的，这些事情。所以现在很高兴能有几年时间，就像今年一样，我从西雅图飞去参加集会，这将是一场漫长的旅程。好的，先给我的iPad充电。

是的，可以。

可以很大。我将前往西雅图。

参加一个研讨会，前往总部，所以应该有。所以可以见到我的同事。我是否会见到他们？这将很有趣。

是哪一天？你也在那里吗？嗯，那属于私事？不，只是你喜欢的。第二，我们可以。

知道。成员，是的，我将前往观看西雅图海鹰队的比赛。对我来说，这将是一场小旅行。

哦，是的，好的。嗯，也许我们会在那里同时出现。好吧。

现场活动。你花时间写博客，就像一点点。

我知道，一点点，是的。自从我新贷款以来，我一直在休息。

我们都经历了一些小故事，发布了一些东西。但是就本节目的背景而言，我认为你那篇关于网络组件的文章很棒。我唯一想说的，就像我希望那样，我希望我在所有关于网络组件和驱动程序的讨论中出现。

但我冰冻了，我拥有它，我非常喜欢它，然后所有这些都上升并燃烧起来，我只是想，我不会发布这个。

几乎是故意的。我一开始没有这样做，因为不想成为所有这些事情的一部分。

我知道我不想让你对某人说的话做出这样的反应。所以现在我必须为网络组件辩护，有些人确实这么做了，现在很高兴他们这么做了。我不需要这样做。

我只是觉得，你知道，我讨厌。我读了很多关于网络组件的博客文章，我听到人们这样想，或者这样想，但那是什么？我不知道。

它们似乎还不错。你或者其他人创造了一些好的东西。所以我列了一个清单，字面上的一个清单。这里列出了我认为它们好的地方，以及一些它们不好的地方。

它们不好的地方，只是因为我避免了再次发生戏剧，对吧？不要总是像个彻头彻尾的查尔斯顿人。

我认为我们还需要将这种观点融入我们的讨论中，就像你可以说“坚固的”很棒，“五谷的”很棒，但是你能说一些关于它的坏处吗？你应该能够说出你喜欢的某些东西的缺点，你知道。

我的意思是，无论它有什么编译器，它都不是百分之百的。如果你让我一个人待一年，然后回来查看你的电脑，我不会编译，请记住我的话，它不会。某些事情会改变，它不会。没关系。

它可以修复。这就是工作的意义。你可以让它工作。但那样的情况是。

就是这样。从版本四迁移到版本五会让你痛苦不堪，就像它只是在大型应用程序中使用它一样，这将需要几周或几个月的时间。你知道，我认为像这样的问题，人们需要真正地，哦，不，不。让我们在我们的宣传中加入一些诚实，这大概是我希望做的事情。所以你知道。

最让我生气的是，很多人正在使用 JavaScript 框架构建网站，这些网站基本上只针对桌面。在构建一个使用 JavaScript 的网站方面仍然有很多工作，因为很多业务和金钱都在其中，我以此为生。好的。

是的。所以假设我选择了 React 或 Vue 或其他任何东西，我正在构建一个网站，并且我从这个角度看待所有这些。你处于一个它们对你来说没有多大用处的类别中。

它们指的是网络组件。你已经有一个组件模型，你只构建一个网站。所以对于那些在该类别中思考的框架作者，以及你们中很多人，他们会说这些东西没用。这些东西没有给我这些组件模型带来的东西。你是对的。

它们不是，是的，我个人认为，如果它在新的框架中工作，它们可能会让你的性能提高 5% 或 10%。所以我不认为你一定要重新架构，但是如果你到了这样的地步，伙计们，我们一直在受到打击。我们应该跳进去吗？

我认为现在是评估网络组件作为我们选择范围内的潜在选项的时候了。你知道，不仅仅是升级，升级是唯一途径，还是有其他途径？如果重写摆在桌面上，我建议不要重写，除非你必须。天哪，这很痛苦，这需要很长时间。

每个人都很好。即将出现一些巨大的价值。

如果你能阐明价值，那就去做吧。

所以现在我提到了不好的地方，比如你正在构建一个网站，几乎拥有一个 JavaScript 框架。但是让我们进入好的方面，很明显，如果你有多个网站，特别是如果它们使用不同的框架，那么这些网络组件可以成为它们之间的粘合剂。

但是我不想抢走这篇文章的精彩之处，因为你的文章中有很多关于好处的要点。成员，让我们来回看看，第一个是四叶结。

如果这个词在你头上飞过，我不会责怪你，但只是因为我不会关注每天不直接进入我收件箱的东西。但是想象一棵树。树叶是树上最远的东西。

树的内部是你的网站。所以就像树叶没有子节点一样。树叶一直延伸到末端，这意味着像按钮组件这样的东西，可能没有很多按钮组件的子节点，所以网络组件在这个特定领域表现出色。

另一个可能是地图，对吧？你不会用谷歌地图的惰性来填充它们，你知道吗？这就是树叶，这就是最终目的地，我们只需要渲染一张地图。你知道，也许我们可以在上面添加标记，但这也会属于树叶节点类别，就像如果你足够老，你记得 Java、Apollo、TypeScript 或其他类似的东西，你会在水中看到一个带有下方闪烁的图像。那些很棒。我们现在没有它们了，因为它们不安全，但我认为像这样的树叶节点，这种想法，就像这些小东西，或者你，你知道，你就在穹顶树的末端，你可以直接进去，它会弹出，是的。

所以，所以网络组件在至少是节点的用例中很好用。

你的第二个是什么？下一个，实际上，我看到有人说他们不是，我认为它们很好，我回去看了，我认为我当时正在和罗布谈话。但是对于展示组件，它可以包装其他组件，就像你拥有的那样，我认为布拉德·弗罗斯特的想法，一个有机体或分子或其他东西，对吧？就像你有一个按钮、一个图像和一个标题，现在你想创建一个卡片，对吧？你可以创建一个卡片组件，这实际上很棒，因为你可以有插槽，并且说，例如，这是卡片标题，这不是，这是插槽名称等于标题，这是插槽名称等于图像，插槽名称等于操作或类似的东西，你可以有插槽，所以你可以实际重新排列它们，让它们的内容直接插入组件中，就像将它们压入接缝中一样，就像将它们连接到 A 的一部分一样。

但是所有这些都是通过角括号插槽实现的。我可以将东西拿出来，放在里面。我喜欢思考这一点。

这很值得思考。当然，JavaScript 框架也可以做到这一点，但是你知道，它在某种程度上是可定制的。

或者你讨厌传播孩子，或者你必须在组件中声明某些孩子在这里渲染，在这里渲染，在这里渲染，或者类似的东西。我认为这个轻微的元素实际上非常棒。它是未来阴影 DOM 的一部分，但是你可以真正地使用阴影 DOM 的一部分，然后在网格上应用一些样式，创建布局，对吧？我认为这在某种程度上比仅仅是孩子概念更强大，因为孩子只是，去，去，但是它们在那里，是的，如果你想将某些东西添加到 JavaScript 模板中，通常然后你会说，好吧，我不能只使用孩子，因为它不够强大，我需要将所有这些单独的部分作为数据属性传递，或者你想称之为任何东西，并构建它，而插槽只是对相同类型事物的不同思维模型。它们可以被命名为插槽，这有助于你将东西添加到其中，而无需将它们作为属性传递。这只是。

的。

HTML 属性结构。

是的，它非常有效。我的意思是，但是我也想说，你不需要，你可以用一个 div 类网格将两个网络组件粘在一起。你知道，你不需要一直使用网络组件，我认为这就像第一个真正的网络组件不是所有东西都需要成为网络组件，这可能与这些 JavaScript 框架不同，其中所有东西都必须适合该组件模型，对吧？

它们擅长构建设计系统。我无法对此发表更多评论。我认为这对于这类事情来说是一个完美的选择。

几乎就像，如果可交付成果是最终产品是一个设计系统，那么你无法做出更好的选择。如果你问我。

我听到人们做不同的事情。他们说它们对你没有用，你知道吗？但是有一些设计系统，例如 Spectrum、Ionic 和 Lightning，网络组件，有很多设计系统是设计系统，它们工作正常，它们很好用，并且存在一些可以做到这一点的东西，你知道吗？我认为它看起来和感觉会有点不同，可能与 React 版本不同。但是我认为你必须也了解为什么。

关于分布能力，我认为这是一个你将要到达的未来点。但是，如果你正在构建一个要分发到世界各地的设计系统，你甚至不知道消费者是谁，那么它是一个更强大的选择。现在，如果你正在为内部消费者构建一个，只是你自己。

你这么做是因为。我不知道，你是一家大公司，这似乎是让你的公司拥有一个设计系统团队或其他团队的正确方法，但是你拥有很大的控制权。它只面向内部。

你知道你的消费者是谁，这仍然是一个不错的选择，但它有点不同。但是它们就像任何人都可以使用它。这绝对是网络组件的领域。

我们正在说，React 19 已经开始发布，这对于一次来说，这是让所有事情都能正常工作的版本。现在它只是一个 RC，对吧？但是你知道，它已经很长时间没有很好地工作了。我们正在 React 18 中完成这项工作。这段代码，本，好的。

我能否问你，你还记得当时的问题吗？

但它们实际上并没有那么糟糕。但我认为在 19 年，这就像根本不用考虑它，它在所有其他框架中是如何工作的。

是的，它们只是工作，是的。我的意思是，我认为几周前人们的想法，就像让它看起来很酷，它只是工作，所以，我对此表示同情，我认为这会很酷。

找到，是的，不是它们不起作用，只是让框架制造商付出努力。那界限在哪里？我是否应该指望框架？不。

就像工作一样。这就是重点。我不知道。

你知道，这就像你的客户要求它，你必须，你知道，你试图让客户满意，对吧？但是我同情它需要付出努力，而且并不总是那么容易。你可以。

如果你想的话，你可以写，因为这是自由世界的事情。你基本上可以创建一个敌视网络组件的框架。你可以编写一个框架，如果元素中有一个破折号，那么它。

只是显示了 nuns 或只是删除了堆栈。我的意思是，对你来说，我可能只是你的爸爸，说，啊，是的，所以我的意思是，我认为像这样，你知道，你可以构建一个设计系统。如果你想的话，它是一组树叶节点。这样想，它们都能很好地结合在一起。我清单上的下一件事是关于逐步增强常规 HTML，就像埃里克·米尔斯一样，你拥有。

一些完美的 HTML。然后，作为增强功能，你用角括号将它们包装起来。如果这个东西什么都不做，那就这样吧，对吧？是的。

但是如果一切顺利，那就是快乐路径。奥斯卡的工作是为该部分添加一些额外的奖励。TMO，就像什么？嗯。

有很多例子。但是你知道，埃里克·米尔斯读了一篇关于它的好文章，我链接了它，但扎克·拉曼有很多关于如何从扎克那里获得渐进增强功能的知识，但细节元素就像围绕细节元素的包装器，它具有诸如转义键关闭或动画或仅显示它，你知道，自动在 350 像素处打开它。

为什么它会这样做？它会向常规细节元素添加功能，这在操作上是可感知的、可理解的和健壮的，它会向其添加功能，除了其固有的功能。所以像这样的情况，你只是在现有功能上添加另一层功能。他可以用一个脚本做到这一点，你说的 document.querySelector，所有关于细节的 L L。他可以添加功能或其他什么，这在工作中非常快。它们都以某种方式工作。

你知道，所以有时，因为你是对的，这是否让你想起杰克·沃里时代，或者你像这样？哦，我需要增强所有我的细节元素，所以好的，一个脚本，它找到所有我的细节元素，对它们做一些事情。嘿，这不起作用。

它不起作用。但是，如果它起作用了，那就起作用了。你知道，你为什么说它很糟糕，是因为我们，我是指氛围已经改变了。我们，嗯，有想要，我不知道，比这更好一点的愿望。

就像，是的，氛围，但它感觉就像手动工作。我想我在这里进入命令式领域。但是我本周收到了一份 APR，我有一堆文档，创建了 span 元素，span 出来，类名为 through。

我只是想，我们正在做什么。就像你可以使用网络组件中的模板元素一样。但是，但是像这样的东西。

就像当你看到 document.createElement 时，你会想，你想要使用 JSX，对吧？但是我们有网络组件中的其他原语，就像 HTML 模板技术，字面上的谈话，但是，你知道，这就像你正在非常手动地做这些事情，我认为这不需要像这样一步一步地操作。我认为你可以说，这就是我想让它看起来的样子，现在让我们让它互动起来。

你知道，是的，所以当我提到氛围时，你会说像编程天堂。

嗯，氛围很好。不，我的意思是，但是这就像你和我，甚至也取决于。

你如何使用它。如果我们继续使用这个细节示例，那就是你有一个脚本标签，它加载了它，然后你使用它的方式只是在你想知道的东西周围放置角括号。

工作，是的，是的，在它应该像组件一样立即出现，并且你用一分钟做完，它从页面上消失了，它很酷。我再也不需要做这些工作了。是的。

你以前说过这一点，我很喜欢，你不需要。但是，在那些杰克·沃里时代，成员，我们经常会将杰克·沃里人群或地面包装成一个穹顶准备语句。是的。

这总是，这总是有点让你感到棘手，如果你忘记了这样做，你没有在页面的底部加载脚本或其他什么。总是有这种操作顺序，我们喜欢，我希望 JK 准备好了。但是当时我需要，我正在查询这些东西，因为可能不是。

然后，持续让你受益的事情是，如果以后页面上添加了任何东西，杰基确实很容易做到这一点，你总是得说，哦，是的，我得到了一个循环，回到你，找到那些元素，然后你就会继续使用这些范式。他就像，嗯，如果你将所有这些点击元素绑定到主体上，使用事件委托，你就不必担心卷积角色在那里。Web组件的好处在于，当它进入页面时，这种自然的事件生命周期就发生了。

所以，如果一个Web组件有这些未连接的回调，呃，那是它叫什么？我忘了，是的，如果有些东西需要附加点击处理程序，你就在那里做，每个人都这样做，因为这就是他们构建的方式，我认为没有人会反对这一点。但是，一旦该Web组件已添加到页面中，就准备好了，它会为你处理所有这些事情。对我来说，这真是一个非常棒的程序。

是的，或者一旦元素被定义，我想更准确地说，你可以拥有一个网络Web组件，它是没有脚本的版本，然后脚本运行并连接它。所以现在它是一个功能齐全的Web组件。然后，你可以在之后添加额外的阴影区域、额外的所有按钮，你需要的一切。

太棒了。所以这就是我们所做的。我们只是做了渐进增强，普通的STML，那一刻每个人都称之为Web组件，我足够坚持，呃，或者没有，它在我的脑海中停留，但还不够广泛使用，或者没有。

我有时称之为轻量级组件，其中有一种风格，你主要使用HTML。如果你想想我的输入，你知道，你是否在里面放标签和输入，你知道，它可以在没有JavaScript的情况下在浏览器上运行。

可以，或者你只需要说，无论我的输入属性是什么，标签属性等于食物，然后里面什么都没有，你仍然可以在元素中渲染一个标签，你也可以这样做。所以这取决于你，有很多选择。从所有人的角度来看，可能有一个更好的选择。

嗯，但我认为从每个人都记得正确连接标签的角度来看，也可能有一个更好的选择，你知道我的意思吗？就像，嗯，你两边都有风险，你知道吗？所以你可以为某人正确地做，或者让他们希望正确地做。所以你投入了很多，这可能取决于你的团队规模，以及你的组件在哪里。因为如果只是你的团队，那就是你的问题。

如果只是你的团队在一个应用程序上，那就是你的问题。如果团队在全球各地数百个不同的应用程序上，那么你就需要为人们做一些工作。

所以，不，不。所以，下一个是，当你想要查看源代码时，就像如果你只想查看网站的源代码或在你的开发工具中，现在正在进行，没有像地图一样。你知道，我的按钮比div、p、f、50、x、y、z、p、d、q更容易。

特别是这些DMI，尽管，不，你也可以查看阴影DOM。但是，我倾向于同意。我知道我一直在使用React网站。你知道，组件面板和调试器的实用性由于这一点而受到限制。你正在查看的愚蠢的n，与js几乎没有相似之处。

你可能正在寻找一个插件，比如React的开发工具。

我知道我使用。我相信有些人生活在那个东西里。我只是...

认为它，但想象一下，如果你在开发工具中做了什么，我只是...

喜欢你的命名。我环顾谷歌网站，谷歌越来越多地使用它们。我知道你可以看到这些嵌套的Web组件模型，它们被命名，没有被混淆。

我们习惯于查看混淆的代码。有时看到一些东西，比如表头或其他东西，名字非常明确，你知道，这正是...

他们有时在会议上。我想说，那叫什么，因为一旦我知道它是什么，我们都会竖起大拇指，那就是它的名字。

我可以开始编码，你知道我的意思吗？就像这是一个相反的问题，你知道吗？就像告诉我它的名字，然后一切就都写好了。嗯，是的，这很奇怪，你知道，人们会说，好吧，这张卡就像，不，但它是什么类型的卡？告诉我卡的名字，然后一切就都好了。食物破折号，科尔，呕吐破折号，桶，我不在乎。我会把它放在那里。你和我将一起工作。

我喜欢。这里有一个。其中之一是构建工具不是很多Web组件项目的典型起点。

现在我们应该重点介绍你所说的工具类型。我的意思是，构建工具是一种特定的工具类型。就像，好吧，我甚至不能查看我的网站，直到它经过这个预处理步骤。

然后事情发生了。现在，很多很多东西都使用构建工具。Web组件也可以使用构建工具，但通常不会。现在，即使你选择了一些框架类型的东西，比如你正在使用的那个，流体，流体，是的。

当然，所有这些...

东西都是工具，但它们就像运行客户端。它们不是构建工具。是的，那是一种不同的工具类型。

所以，如果你说，嗯，你也需要这样的东西，大卫以前没有告诉我你应该使用这样的框架吗？是的，你可能应该。这是一种截然不同的工具类型。然后，构建工具是那些往往更脆弱的东西，就像你今天的组件。你知道，你被锁定在某个版本的垃圾桶中，无论它是什么，它只是在浏览器中继续工作，因为浏览器很棒，但不会破坏未来的东西，但你的构建工具...

愿意的AK，是的，我的意思是，有人可以属于并说，他还有另一个版本的迟到，但你知道，那有解决方法。但是，嗯，嗯，是的，我认为大多数人或人们所说的是，构建工具是生产问题，与Web组件一起，我们只是编写HTML。HTML可以放在任何地方。

你如何缝合、构建和发布它，这取决于你。你知道，它可以在没有网络的情况下发生，它可以在一个应用程序中发生，它可以在各种地方发生。所以，嗯，有很多选择。

部分取决于你。好的，我...

从构建工具的想法出发，但是当你构建一个单一项目时，比如你的博客网站，当你回来时，你不想记住构建工具是如何工作的。你知道，那是什么，我当时在用什么，它坏了，哦，为什么，你知道...

啊，它坏了，这是一个问题，但这也意味着，这个加载，这个东西是如何再次工作的，或者它没有坏，但它，你知道，我们用Node 20构建了它，但现在已经两年了，我们用的是Node 20...

5或其他什么。就像，如果你减少对框架的依赖，你应该安装什么，你知道吗？我再次认为框架对于帮助你管理它很有用。但我管理所有这些，但就像减少对单一项目的巨大依赖，比如你公司中的任何随机事件板。

那就是最痛苦的，对吧？那是你的东西。这些通常不是我们谈论你绝对最重要的项目，其中可能存在复杂的构建内容。

这很好。但就像我们还需要这个构建工具。那就是你的东西，不要为它而烦恼，当它坏了时，回来最令人恼火，因为你就像，啊，这只是一个愚蠢的小...

东西，为什么不，是的，让那些容易，尽可能减少依赖。我想我曾经在某个时候用过认知过载这个词，但只是那种负担，就像，天哪，这个东西是如何组合在一起的，你知道吗？如果你在项目A、B和C之间来回切换，它们都不同，那真是太难了。

就像，如果你只是说，好吧，我只需要查看我的package.json，希望开发命令能够做到这一点，希望你已经到了那里。怎么样。

如果你有很棒的想法，但不知道如何构建网站，那就使用Bluehost及其AI设计工具，你可以快速生成高质量、加载速度最快的WordPress网站。一旦你确定了外观，只需在你的心理上点击回车键。

真的就这么简单，无论你是博客作者、影响者，还是刚刚开始创业，Bluehost都能满足你的需求，它内置了营销和电子商务工具，可以帮助你发展和扩展。你的网站将持续很长时间。当你升级到Bluehost云时，你会获得100%的正常运行时间和24/7支持，以确保你的网站在高流量下保持在线状态。

Bluehost确实让构建你梦想中的网站比以往任何时候都更容易。还有什么能阻止你？你已经有了愿景，现在要把它变成现实。立即访问bluehost.com，开始你的旅程。

好的，更多构建...

少说话，就像...

你单一项目是一回事。但是像原型，就像我过去几周一直在做的事情。快速构建真的很重要。你知道，你不需要构建步骤，你只需要在页面上放置一个HTML。不，你可以添加...

那些东西，并...

做得更好。我绝对喜欢我的整个理念，如果你不能像在切片中那样运行你的设计系统，很多人喜欢，你知道，就像，我认为我稍后会说，设计师，你知道，他们只需要这种能力来使用它。你知道，不是每个人都是拥有20年经验的全面开发人员，在网络上包装宇宙，你需要人。你需要多个入口点来包装你的包，一些速度问题。

它们往往更快。它们使用更少。它们更高效。所以这是一个快速的问题。

只是，是的，所以你...

知道，平均而言，嗯，你知道，对我来说这是最早的，说这是让我感兴趣的最早的事情，那就是它们拥有这个阴影区域，这是一个独特的生物。虽然它不是最近大家最兴奋的事情，但我认为我们有时会谈论如何避免它，但并非总是如此。

它确实是一个独特的元素，任何框架都绝对无法做到，因为它太低级了，我认为框架无法在这个级别运行。如果你需要它，它可以提供阴影DOM。阴影DOM中的一件事是封装样式，甚至包括JavaScript选择器等等，它就像一个微型框架。

它不是一个iframe。它不同，但它被封装了。如果你需要它，这是唯一的选择。

是的，我的意思是，你可以将阴影DOM放入你的React组件中。我知道有些人这样做，但我认为...

在基因组中，那里没有...

你不会得到。所以，是的，不一定是最好的体验，是的，我的意思是，我知道我曾经说过，我认为样式和可访问性有时太多了，你知道吗？就像我知道我在做什么，选择器不存在。它还不存在，但我仍然感觉很糟糕，因为我再次认为我为人们提供了实现他们需要的东西的方法。这很有帮助。但是，是的。

我们已经谈到过这一点。但是，如果你有阴影DOM，它就在那里，你用来为页面其余部分设置样式的普通CSS没有任何作用。好吧，我不能说没有机制，但它没有典型的机制来进入阴影DOM并为其设置样式。

它就是这样构建的，因为它们应该是一个屏障。某种程度上，也许阴影DOM的主要目的就是如此，但这可能有点令人沮丧，因为有时你想要阴影DOM，不是为了封装，而是出于其他原因，例如模板原因、可分发性原因，无论是什么。只是有点不幸的是，没有简单的方法可以进入那里。

所以人们说，或者说，合作伙伴，合作伙伴的方式不存在？我曾经说过，我希望API在存在时能为我做这些事情，这对我来说很愚蠢，你知道吗？我对此有明确的立场。然后有些人说，嗯，客户属性是否会出现在那里，这样你就可以通过这种方式设置样式？是的，当然可以。

你可以。只是这两种方式都有一些其他东西。有一些CSS，但它不仅仅是说，这里有CSS的力量，我认为我们应该在里面。老实说，我部分同意你的观点。我觉得这就像一个动作，而不是一个解决方案。我认为它试图模拟原生元素，比如按钮、webkit、一些滑块、滚动条等等。但我认为它是一个相当开放的表面，就像这些元素实际上位于实际元素内部一样。

我还认为这是其中一种情况，你知道，这是Web标准的核心，我们可以做什么，你知道，在，好吧，让我们构思完美的解决方案。但我们可以做的是一个更小的现实集。我们本月可以做些什么来获得YouTube构建器，无论是什么，这不是你应该用它做的事情。但是，你知道，我如何做一组更小的功能，它给你一种在阴影DOM中设置样式的方法，我认为这很好。

但是你不能那样做。你可以选择一个元素，然后说，哦，但我想要选择一个卡，然后我想选择卡中的心，所以我会把卡分开，然后也会像卡的OK部分，然后我不知道，h3作为孩子，不是太糟糕，不同的部分。是的，那部分对我来说很愚蠢。那就像，你为什么要...

甚至那样做？你为什么要让我到这里？但是你刚刚说，不，不，是的。

就像你已经让我明白了。是的，有原因。我也理解，如果突然平台发布了我们所说的“我知道我在做什么”选择器，这将打破之前存在的契约，所有外部元素现在都可以以以前不可能的方式访问和样式化阴影DOM中的内容。

当然，肯定有很多人，因为Web组件比你想象的要多得多，它不再是特别的小众事物。它们的作者可能会说，嘿，我故意这样做的，所以用户不能那样做。这打破了曾经做出的承诺，但这确实让我思考了最近CSS中正在发生的上层概念。

你有没有见过像动画到自动这样的东西？是的，那些是开放的。为了让它工作，你可以在文档的根部做一些事情，从而让它工作。这对于你购买的新的选择菜单也是如此。有很多你可以做的事情，但是如果你...我忘了确切的键值对，但是现在CSS中有一些东西说，哦，这个选择元素，我正在...

将其添加到这些新样式中，就像这个基本...

选择器，就像那样。也有很多，因为你必须通过你的团队进行一些调整，等等。但很明显，没有人...

你不能意外地让我们的样式意外地应用于这些选择器，他们发布它，因为其他Web平台正在努力非常小心地做到这一点，不要发布会更改你已经知道15年看起来相同的网站，突然看起来不同的东西。他们真的尽量避免这样做。一种做到这一点的方法是选项模型。

对我来说，这似乎可以用某种“我知道我在做什么”选择器来实现，如果你想让它通过，你必须选择使用它，这样它就不会打破作者与作者之间的旧契约。是的，我一直认为阴影模式打开和关闭意味着什么，但我甚至不...

到今天为止，我甚至完全不理解...

那个设置到底做了什么。是的，它基本上是显示根关闭。从这里描述，显示根打开更容易。这意味着如果我像文档查询选择器，我的按钮，然后我可以进入阴影根，我可以进入阴影根，然后我可以进入阴影根，然后我可以进入阴影根...

查询选择器，你可以直接滑过，所以你可以得到父级，然后...

然后钻进去。我可以进入阴影根模式打开的阴影根，这现在是默认模式。但是，你必须指定它，就像它默认做的那样。

所以这不是上层，但让我们花...

从一开始就存在。是的，封闭意味着你不能进入。你可以进入谷歌的东西，谷歌地图，并说文档查询，谷歌破折号地图，破折号阴影根。呃，他们不会让你这样做。

所以，它可以用于查询选择器，但它不能用于CSS。我应该，我同意，更多。

我觉得人们开始更多地思考IT了。但是你知道，其中一件事情……

类似的事情，你听说过德明（Deming），类似一个小小的例子或什么的。你可能会想，为什么不把IT打包起来，这样人们就可以拿来放到他们的项目中？你知道，只是一个小的启动器，一个可避免的小东西。我喜欢你也有这篇文章，关于如何在Markdown中使用Web组件。你只是……你知道怎么做，你就怎么做。

你只是标记。

Markdown支持IT中的HTML。所以，如果我们已经了解了客户的需求，那么这是一种完美的实现方式。你真的很喜欢MDX，你认为MDX是……是的，这就是标记语言，而Web组件不需要任何构建步骤。

所以，我们曾经想过，如何制作可访问的标签或下拉组合框，按顺序完成搜索？如何制作可访问的？然后你被引导到一些古老的学术网站，上面有所有这些冗长的代码，你知道，七百行、九百行冗长的代码。

然后就有了这些。你明白了。或者它是一个React组件，有72层嵌套上下文。然后我就有了。你明白了。这就是你在你的项目中使用它的方式。但这仍然不能帮助我完成订单，这样我就可以……你只需要写出代码，然后我就可以把它放在我的页面上，因为那会很棒。不，因为我没有使用这部分……我想只使用这个Web组件，谢谢，但是无论如何。

人们可能会说，是的，那里有Web组件的优势，我们正在谈论……你不能用它来代替iframe来显示第三方内容。我认为这仅仅从性能的角度来看就吸引了我。Iframe非常有用，但性能表现不佳，还有其他问题。所以这是一个可能性。

嗯，即使只是像你说的那样，它们通常性能不好。但是，如果你考虑一个像内部聊天窗口或什么的，那会很棒。他们可能做了很多工作，以确保他们的样式不会与任何其他人的样式冲突。

你知道。我的意思是，他们做了很多工作来实现这一点。如果默认情况下就是这样，那可能可以节省几百个小时的开发时间，你知道。所以，是的，你只需要把它放出去。

我之前想说的一件事，就像我们谈论文本税一样，但另一个让我在阅读完文章后想到的点是，你知道，它可以在你的博客、你的WordPress博客和其他你喜欢的平台上运行。Web组件可以应用于很多不同的场景。但是，即使它被困在版本跳跃中，比如从18到19或其他版本，这对你组件来说是一个很大的飞跃。

你的Web组件是你的UI的一部分。那些可以在两个平台上存在的组件可能会让你少很多麻烦。所以……所以你可以开始在小地方使用新技术或推出新技术，而不用担心崩溃……就像……我不知道，React 19原生支持Web组件，对吧？

但是，Chris，很多人并没有使用19。是的，不是所有18的用户。不，大多数用户使用的是16。

我们查看了它，并不是说我们禁止查看19。它还不够稳定。我没有时间做这个。不。

不。我的意思是，你知道，一个版本升级到另一个版本，从16到18，从18到19，这可能很糟糕，但不是……但我的意思是，如果你必须在升级之前全面升级整个UI，那很难。但是，如果你的UI在框架之外存在，那么……是的。

你早些时候提到过设计方面的问题。我认为我们的设计师，我发现这是真的。我只是一个人，当然，但我发现很多网页设计师都非常了解他们的媒介，因此他们精通HTML、CSS，甚至可能还有一些JavaScript。但是他们不会深入研究框架。他们知道他们的工艺原材料，但不是框架专家。他们不了解你深入研究的任何东西。一个设置好的Web组件可能会帮助他们比以前做得更好，因为Web组件只是HTML、CSS和JavaScript，无论如何，它可能会让他们的工作更进一步。

你用框架做的事情……是的，我的意思是，我认为，你指着代码示例，你知道，不是我想要比较的，但是指着代码示例和指着StackBlitz是两码事。一个是超级简单的，另一个是……天哪，我把自己弄进去了。

那个是Deck.js，我爱你，StackBlitz，你回应展示，你知道。它有很多开销，Chris。就像你打开它时做的第一件事，就是安装一堆东西。你就像……做这个，我不知道我该在哪里输入，你知道……所以代码示例更像是：这就是我们正在做的事情，这就是你得到的，这就是它的工作原理，你知道，非常容易理解，是的，我说的适用于所有版本的代码。

好的，有很多东西。如果这太多了，我们只需要阅读David的文章，它比我们说的更清晰、更快。但是，谈论它很有趣，不是吗？它们在很多方面确实表现出色。

我的意思是，我认为你的列表和我不同。有些人对某些事情投入很多。我用它构建所有东西。

你……或者我讨厌这个。这太愚蠢了。我什么都做不了。

然后我继续说，好吧，我只是想把谈话带到，这就是他们所做的一切。他们不仅仅做一件事。他们不仅仅是构建业余网站，引用苹果团队中某人的话。

他们没有这样做。他们做其他事情。所以……是的，还有很多例子。

他们构建了非常大、非常强大的东西，这很有名，有很多方法。但是，很容易指出Photoshop的例子，因为，哇，他们真的只是用组件写了Photoshop，这样其他人也可以……是的。

所以，就像……婴儿状态。

让我稍微整理一下我的想法。

他们可以做些什么？不，不，他们可能会……是的，我可能会给你一个答案，可能有点……它可能看起来像基于生成的反应上下文。我认为他们写了这个。我认为是的，我认为反应上下文可能就是正确的答案。

好的。所以，我不想听到任何人的意见，如果你的想法是……奇怪的是，把它们应用到我们的网站上，你唯一考虑过使用它们的场景是一个桌面网站，它使用了一个我不关心的JavaScript框架。

是的，可能不是你正在构建的东西。我想你知道，你正在开始一个新项目。你知道，你试图将新技术放入另一个技术中，你的第一次尝试永远不会好，你知道。所以，我试图说明的一点是，这是每个人的第一次尝试。

所以，我把它理解为，当你第一次使用Web组件时，它很糟糕，因为你就像……到底发生了什么？我如何为这个按钮设置样式？但是，你慢慢开始理解它的局限性和它的优势。所以我可以说，我们仍然会遇到一些问题。但是，这就像……这可能是一篇即将发表的文章，但它只是……哦，好的，所以你并不喜欢阴影中的视图转换，你发现阴影中的子元素中的视图转换不起作用，你就像……页面上的其他东西。我认为它们就像JS一样，所以你……

……期望会起作用，是的，所以它只是……

……类似的事情。你知道，这就像你……好的。嗯，我需要为它编写一些示例，然后向浏览器提交反馈，让它发生。但是，这就像……

因为我们已经谈到这个话题了，所以这里有两个相关的问题。我认为尝试解决这两个问题会很好，因为这样我们就可以让Web组件发挥作用，就像我们这里从Andrew Schofield那里得到的一个问题。感谢Andrew的提问，他基本上问了，要让Web组件的下一个版本是什么？

对我来说，这是一个非常有趣的问题，因为我们已经谈论过，但它还没有真正出现。你知道，React的下一个版本是什么。

你别无选择。你必须使用React。它确实以好的方式帮助React发挥作用，但并不那么流行。这是一个非常好的框架，为人们做了很多事情。

所以它做了什么？我们能想象一个这样的世界吗？我认为这有意义，因为它还没有出现，因为它们可能各自走了一段路，并独立发展？

对我来说，这并不令人惊讶，它还没有出现，特别是从我的角度来看，我认为一个很大的原因是声明性阴影，它相对较新。如果没有它，框架的意义是什么？对我来说，它似乎是框架可以做的事情，阴影的清除可能不是你手动编写的东西。也许有时它们……

……在问题中明确指出，没有人会手动编写它，我就像，实际上，我会。

但是，我认为，是的，我认为这是框架应该做的事情，特别是因为组件不仅仅用于一个地方。它们遍布你的应用程序。如果它们遍布整个应用程序，你需要某种抽象来帮助你，否则你将不得不手动处理组件的15个实例。

所以，对我来说，这就是它。要让Web组件的下一个版本是什么？这就是我们正在思考的问题。

你能创建一个声明性阴影喷洒机，为你做所有这些事情吗？然后，下一件事是，我不低估这些框架的意义。我认为人们使用和喜欢它们的理由是路由。

是的，这都是关于框架的路由。而不是路由器，发明一个，使用一个，对它有自己的想法，在其中加入处理其他内容的东西。除非框架包含路由器，否则它不是下一个版本。

这就是你对Remix旅程的看法。在某个时候，他们创建了Remix，然后他们说，这基本上只是一个路由器。所以Remix只是React的路由器，或者5或其他版本，是的，因为他们意识到框架主要是在路由中服务页面。所以，我认为，要让Web组件的下一个版本是什么，它必须包含路由器，或者甚至只是……

……基于路由器的。是的，我认为基于文件的路由会非常有用，这涉及到像`bracket-id-basket.dot`之类的，你知道，或者其他类似的东西，比如`/ranked-id-8`，你知道，我认为这会非常方便。我认为你说的声明性阴影是正确的，我认为它会发挥作用。我认为它不必完全以静态形式实现，我认为如果你……

……必须是骨架……

……也许这涉及到框架如何处理动态模板部分。但是，也许有一种方法可以像模板一样，你知道，阴影或DS模板应该是什么样子。你知道，你可以提供它，或者通过你的组件生成它。

你知道，这很重要，这是Next.js的另一个优势，我们正在谈论它。它有三种渲染模式，这使得它很容易思考，并且说“容易”，因为它实际上可能需要很多工作。但是，这三种模式都是完全客户端渲染的。它们都是完全客户端渲染的。

然后是中间一种，它是由节点服务器按需渲染的。我认为我可以很好地处理这三种模式。我认为看到一个Web组件框架会很好。从你的角度来看，这可能是它的静态渲染版本，它可能有一种方法来指示该组件已准备好进行此类处理，但不需要完全的保真度。

想象一下一个属性，它只是说明它在框架中的行为方式。是的，这个……这个甚至不需要为你渲染，因为你不是客户端，这个只是HTML。

所以，你最好完全实现它，因为没有理由不这样做。然后，中间的那些，就像……是的，那些就像……你知道，一个照片级的东西，或者类似的东西，它可能需要一些改进，但不需要先获取所有图像。这需要太多工作，所以让它发生。客户端渲染，但服务器端版本应该有小方块。

公平……是的，是的，我的意思是，我认为……我认为你必须考虑的另一件事是像React Helmet这样的东西，如果你有所有这些元数据，并且它们在页面之间切换，你如何更新标题、Twitter卡、摘要卡？如何在页眉中更新这些部分，我认为这是一个需要解决的问题，这是一个……

……框架需要解决的问题。

是的，我不想……你能生成这些卡吗？

它可以是一个组件。它可以是，你知道，框架的Helmet元素，它所做的是将它的输出传播到页眉，这不会太难。

对吧？老实说？是的，这很有趣，你知道，就像做布局一样，对吧？就像……你知道，像一个法律文件夹，有默认值，然后有你的文档，然后你做冷或热，或者类似的东西。

猜猜看，Chris，Web组件有插槽，所以它们可以包装……你的应用程序外壳可以只是一个布局，然后……但是你仍然需要处理页眉部分。这就是关键。是的。

你仍然需要做出一些决定。你必须有自己的想法。它不会……你可能想要让它与任何抛给它的组件一起工作。你可能想要框架的特定功能来要求某些东西，例如命名和特定属性。

每当你像“我要为你编写网站”时，你都会遇到一些人皱起眉头，说“我不认为这是正确的”，你知道，这是公平的。不……所以，但我总是说，我认为……我认为有机会看看，你知道，我认为在Hands-on中非常接近……从开始，现在是Sanitary团队的一员。从本周开始……国会……但是，但是，像增强功能一样，非常接近。你知道，Eleventy与Web组件有点像。我甚至在其中添加了Astro组件，即使它们有点像……试图避开框架或不是框架，你不知道……是的，我们支持React，这是每个人的好朋友，这很好，但是……我认为这些应用程序，这些服务端生成器，让你非常接近我可能希望Web组件的下一个版本是什么……我不知道，还有其他方法……对于Web组件来说，现在很棒，所以也许他们正在努力。我……

……上周我写了，你并没有真正说，因为我认为我……

……我不知道，因为我们不是记者。

但是，我得到的印象是，他们正在谈论类似的事情，我认为他们还没有准备好揭开Web组件下一个版本的序幕。但是，如果他们能成为Web组件的下一个版本，他们肯定会排在首位，当然，这种愿望是存在的。他们只需要，我认为，让它与他们的业务现实和所有其他事情相符，因为他们知道一个功能性的业务现在需要支付员工工资等等，你知道，不是所有事情都是一帆风顺的。

但是，Web组件的好处在于，如果你正在构建Web组件的下一个版本，你拥有一个完整的组件库，然后这个人开始疯狂……开始……吓跑人们，并开始大规模行动。你可以把这个完整的组件库，希望如此，并将其移动到另一个项目。

我认为，我应该添加到这一点的是，希望你的组件没有过度依赖框架。你知道，它们只是元素。它们不是特殊类型的元素。你知道，我必须编写只能在你的系统中运行的代码，因为我认为这样它们就不再是通用的Web组件了，这很有意义。所以，是的。

还有一个我想跟大家分享的，特别是我们刚才讨论的框架方面的内容，Alex Hinton 写了一篇文章，讨论了 JavaScript 能够做到什么程度，而不需要框架。

框架是现成的工具，或者前端领域下一个框架类型的东西会是什么？如果发生这种情况，那么框架在这个世界中扮演什么角色？这些东西是什么？框架中需要构建工具完成的任务是什么？或者，Web 平台是否可以介入并开始执行框架的功能？最近，人们讨论的是让框架做更多的事情，而不是更少。

所以，这个问题的时机有点奇怪。但是，因为我之前对路由做了很多说明，我会提到它。几年前，有一个名为 URL 模式（URL Pattern）的 JavaScript 功能。

这篇文章的标题是“URL 模式将路由引入 Web 平台”。我不知道它后来怎么样了。所以，这里有点糟糕的播客新闻报道，但重点是，React 非常流行。

在 JavaScript 中，路由是如何在 Web 应用程序中实现的，基于文件夹或其他方式，这可能在某种程度上始终需要框架。但是，如果你在客户端执行，它也可以是这些。组件的工作之一是路由。

如果你能想象 React Router 的样子，它有一个路由元素。它的子元素称为路由，有一个属性可以匹配 URL 模式。如果匹配，它会渲染该组件内的组件，这是一种声明式的方式来实现客户端路由，它可以应用于原生平台，例如 URL 匹配，那么我应该渲染 X。X 可以是一个 Web 组件。

是的。

所以，框架或 Web 平台可以吸收框架中的功能。如果这样做得好？它成功了吗？我不知道。你听说过这个吗？你还记得吗？

你是一个模式？我实际上不记得这个，但这看起来很酷，因为我一直在考虑编写一个类似的东西。这看起来像是一种，你知道，你给它一些常见的模式，然后说，像这样，这是真实的 URL 吗？说，是的，这是有效的 URL，这就像你需要验证它一样，对吧？

就像你知道，你可以测试 URL，否则会跳转到 404，但是你可以执行 URL，但是我不知道确切的 URL，我不知道它返回的是什么对象，但是也许不，这对于你正在获取所有程序中的所有内容来说会很酷，就像 Colin 的想法一样。现在 ID 等于 1、2、3，在 JavaScript 中。我可以说，导航 API 现在正在讨论中，这是一种路由技术的导航 API，它正在出现，你认为它怎么样？

你可以获取历史记录，就像历史 API 或 pushState API 一样。我认为这很酷，我会考虑的。所以，我认为需要存在这样的技术，调度程序或其他东西需要出现。

你知道，我们现在有这个想法，但是你知道，如果周围有更多技术来帮助它，那就更有用了。嗯，我认为信号 API 将会非常重要，说实话，对 JavaScript 的所有领域来说都是变革性的，因为这样我们就可以拥有一个原生的全局状态解决方案，如果这样理解的话，我认为这是人们需要的。不，我认为我们一直在追求这个，所以我觉得这会非常重要。嗯，我认为这还没有...

我不认为框架会消失，但我感觉 Web 平台的工作是关注人们正在做的事情，并使这些事情变得更好。无论何时发生这种情况，对每个人来说都是好事。是的，这些机会使它们运行得更好，比其他任何方式都做得更好。

希望如此。

但希望如此，对吧？这并不是一个完美的记录，但通常情况就是这样。我今天一直在看一些设计糟糕的网站。我心想，天哪，我们应该怎么做。当你看到一个真正好的网站时，你几乎可以肯定它没有使用新技术，它仍然在使用一些旧技术，以及我们如何才能改进需求？嗯。

我们正在谈论原子 AI，我认为。但是，你知道，我认为我们需要新的 HTML 标准或类似的东西，用于像应用程序或其他东西那样的高级内容。我总是说我们需要更多的 HTML 来做事情。

像弹出窗口这样的东西极大地减少了对 UI 库的需求，因为像这样，你只需要用自然属性弹出窗口，你知道，以及锚点位置之类的东西。没有框架，你也可以做到。这很酷。

如果我们对表格（例如数据网格排序）也这样做，你点击排序列之类的东西，那会非常棒。我，所以我觉得，你知道，你必须跳出思维定势，但是我觉得，你知道，我们为什么要选择框架？因为它们有很棒的表格。

你知道，有时这就是答案，这很好，但是表格需要很多 JavaScript。所以，Notion，感谢你赞助这个节目。这是我新想到的，感谢你赞助这个节目。

响应式和原子。

谢谢。谢谢。对吧？我们还有什么要说的？还是我们应该结束这个节目？

节目应该结束吗？

我们不会做两个小时的节目，谢谢。我们已经完成了。然后我上推特，然后我删除了我的推特账号。所以，WIP，Daisy，它消失了，是的。总之。

我为此感到难过。感觉就像我浪费了大量时间。你应该回家休息一下。

你必须这样想。我们一路结识的朋友。我们学到了很多东西。

你分享了很多东西。你建立了你的网络，现在我们可以走了。一切都会改变。

是的，这就像百分之一的后悔，但也是，我的生活现在没有那么复杂了，没有它，我的生活变得更简单了，每个人都在蓝天中移动，无论如何，总之，是的，加入迪斯科舞厅。那里也有很多人。

P、K、S、I。