前言
在现代 Web 应用中，组件化已经成为了不可替代的开发方式。Web Components 是一个跨平台、跨框架的组件化标准，通过自定义元素、Shadow DOM、HTML 模板和 JavaScript API 可以轻松地创建可复用、可拓展的组件。然而原生 Web Components 目前仍处于实验阶段，且在浏览器兼容性和开发体验上存在一些问题。
Stencil.js 是一个基于 Web Components 标准的编译器，提供了一个简单、高性能的开发模式，能够让我们快速地构建跨框架 Web Components，同时提供了一些实用特性，包括 Server-Side Rendering、TypeScript 支持、虚拟 DOM 等。本文将详细介绍如何使用 Stencil.js 构建跨框架 Web Components，并搭配实例代码进行演示。
前置知识
在阅读本文之前，需要掌握以下基础知识：
- HTML、CSS、JavaScript 基础
- Web Components 标准
- TypeScript 语言
安装 Stencil.js
首先需要全局安装 Stencil.js：
npm install -g @stencil/core
创建一个新的 Stencil.js 项目：
npm init stencil
接着按照提示，选择要创建的项目类型和组件库等信息，最终生成的项目目录如下所示：
-- -------------------- ---- ------- ------------------- --- ------------- - --- -------------- - --- --- --- ---- - --- ----------- - - --- ------------- - - - --- ---------------- - - - --- ---------------- - - - --- ---------- - - --- --- - --- ---------- - --- ------- - --- ------- --- ------------- --- ------------ --- -----------------
其中：
src/components/目录用于存放组件代码src/index.html是应用入口文件src/app.css和src/app.tsx是应用的样式和逻辑代码
创建组件
接下来在 src/components/ 目录下新建一个 hello-world 组件：
cd src/components mkdir hello-world cd hello-world touch index.tsx
hello-world 组件的代码如下：
-- -------------------- ---- -------
------ - ---------- - - ---- ----------------
------------
---- --------------
--
------ ----- ---------- -
-------- -
------ ----------- -------------
-
-这里我们使用了 @stencil/core 提供的 Component 装饰器注册了一个 hello-world 标签，并在 render 方法中返回了一个简单的文本节点。接下来在入口文件 src/index.html 中使用该组件：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------- -----------
-------
------
---------------------------
------- --------------------------------------
-------
-------在浏览器中打开该文件，即可看到页面上出现了 Hello, World! 文本。
组件属性
组件的属性可以用来传递组件内部的数据，而在 Stencil.js 中，使用 @Prop 装饰器来声明属性。下面我们对 hello-world 组件添加一个 name 属性：
-- -------------------- ---- -------
------ - ---------- -- ---- - ---- ----------------
------------
---- --------------
--
------ ----- ---------- -
------- ----- -------
-------- -
------ ----------- -------------------
-
-在 render 方法中，我们使用了 {} 来插值渲染了 name 属性。接下来在 src/index.html 中使用该属性：
<body> <hello-world name="John"></hello-world> <script src="/build/my-component.js"></script> </body>
刷新页面后，可以看到输出了 Hello, John!。
组件事件
组件的事件可以用来监听组件内部的交互，而在 Stencil.js 中，使用 @Event 装饰器来声明事件，使用 EventEmitter 来触发事件。下面我们对 hello-world 组件添加一个 click 事件：
-- -------------------- ---- -------
------ - ---------- -- ----- ------ ------------ - ---- ----------------
------------
---- --------------
--
------ ----- ---------- -
------- ----- -------
-------- -------- -------------
------------- -
--------------------
-
-------- -
------ -
---- --------------------------------------
------ ------------
------
--
-
-在 render 方法中，我们使用了 onClick 属性来绑定 click 事件并调用了 handleClick 方法。在 handleClick 方法中，我们使用了 this.onClick.emit() 触发了 click 事件。接下来在 src/index.html 中捕获该事件：
<body>
<hello-world name="John" onClick={() => alert('Hello, John!')}></hello-world>
<script src="/build/my-component.js"></script>
</body>在组件上添加 onClick 属性，并调用 alert 方法，点击组件后即可弹出 Hello, John! 的提示框。
使用样式
组件的样式使用 Shadow DOM 来封装，确保样式不会影响到其他组件或页面元素。在 Stencil.js 中，使用 @Component 装饰器的 shadow 选项来开启 Shadow DOM，然后就可以在组件内部使用样式了。接下来我们在 hello-world 组件中添加一些样式：
-- -------------------- ---- -------
------ - ---------- -- ----- ------ ------------ - ---- ----------------
------------
---- --------------
--------- ------------------
------- -----
--
------ ----- ---------- -
------- ----- -------
-------- -------- -------------
------------- -
--------------------
-
-------- -
------ -
---- ------------------- --------------------------------------
------ ------------
------
--
-
-在 @Component 装饰器中，我们使用了 styleUrl 属性指定了样式文件路径，并使用 shadow 属性开启了 Shadow DOM。接着在 src/components/hello-world/hello-world.css 文件中编写样式：
.hello-world {
color: #f00;
background-color: #fff;
border: 1px solid #f00;
padding: 8px;
cursor: pointer;
}刷新页面后，可以看到组件的样式被应用到了 Shadow DOM 中。
总结
Stencil.js 是一个强大的组件化开发框架，提供了快速、高性能、跨框架的 Web Components 开发体验。在本文中，我们了解了如何使用 Stencil.js 创建组件、添加属性和事件、以及使用样式。希望本文能够给想要学习 Web Components 的前端开发者提供一些指导。完整代码可在 GitHub 上获取：https://github.com/example/my-stencil-project。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455ac73968c7c53b09192e1