使用 Web 组件进行无痛小部件开发

Posted on 2024-12-05

我一直在尝试寻找一个好的解决方案来提供响应式小部件，人们可以使用这些小部件在他们的网站上嵌入节目列表、注册表单等，并最终找到了一个好的解决方案：Web 组件（使用Stencil来制作事情变得更容易）。它的Caniuse 评级为可接受的 97% （Safari 有一些注意事项）。

由于以下几个不同的原因，基于 iframe 的解决方案都不能令人满意：

  1. iframe 高度调整绝对是一件痛苦的事情。是的，有一些库可以帮助解决这个问题，但它们都涉及在父页面和子页面上添加一些内容，而我没有那么奢侈。 iframe-resizer 库（不再免费）在这方面做得相当好，但它需要上下文特定的配置作为父页面的一部分。使用我的小部件的人不会知道这一点，我无法预测他们将如何使用它们，因此无法轻松地为他们提供正确的嵌入代码。

  2. CMS 应用程序嵌入 iframe 的方式不同。我必须支持 Squarespace 和 Wix 等，它们都以不同的方式处理 iframe。例如，Wix 将您的 iframe 代码嵌入到它们自己的 iframe 中，这会导致各种问题。我不能依赖主机确定性地嵌入相同的代码。

  3. iframe 无法实现上下文 CSS 样式。我希望我的小部件继承主机的字体系列、背景和其他样式。由于 iframe 与主机的 DOM 隔离，因此我无法将<body>样式继承到我的小部件中。

Web 组件解决了这个问题，因为它们将我的小部件代码加载到主机网站的实际 DOM 中。然后我可以控制渲染到 DOM 元素中的内容，并可以使用 Shadow DOM 对其进行操作。这就是 Stencil 的用武之地，它通过使影子 DOM 操作（包括状态管理和事件处理）变得更容易，使生活变得更轻松。

作为奖励，Stencil 提供了向后兼容的方式来加载 Web 组件，以应对不支持import语句（例如 Wix）并且您必须依赖 ES5/延迟加载的情况。我之前写过关于平衡抽象和透明度的文章，Stencil 团队使用的设计原则对此很感兴趣。你正在编写如下代码：

 @成分（{  
  标签： '我的组件' ,  
  样式网址： '我的组件.css' ,  
  阴影： 真的  
})  
出口 班级 我的组件 {  
   @Prop () 我的_prop  
   @状态（） 柜台 = 1  
  
   使成为（） {  
      返回 <按钮 单击= {() => 这。计数器++ } >  
                {这。我的_prop } {这。柜台}  
             < /按钮>  
   }  
}

上面融合了一些不同的想法，同时看起来仍然非常像编写普通 Web 组件的方式。除了您可以获得轻松配置的 props、状态管理、JSX 风格的渲染，以及如前所述，附带的分发目标可以满足任何需求。

对我来说还为时过早，但到目前为止，这看起来像是如何分发小部件的明智选择。

原文： https://zarar.dev/web-components-make-widget-development-much-easier/