使用Svelte来构建Web Component（超简单方便）

每个开发人员都应该关注代码中的可重用性以及代码的业务隔离，这样可以让业务逻辑与应用架构分离，提升系统的扩展性。而 Web Component 就是这样一个技术，可以让我们创建一个独立的可重用组件。

本文将介绍使用 Svelte 创建通用的 Web Component 的完成过程。『通用』指的是该组件不局限于 Svelte 应用，还可以用于任何 JavaScript 应用程序（如 Vue、React 等），同时还将介绍使用 Svelte 创建 Web Component 的一些局限性。

什么是 Web Component?

Web Component 可以让我们创建可重用的、自定义的封装了样式以及功能的 HTML 元素。

例如，我们使用如下代码来创建一个导航条：

如果用 Web Component 技术，我们可以定义一个自定义元素（如 ），然后你可以在网页任一地方使用该元素显示导航条，同时这个导航条的样式和页面其他元素的样式是完全隔离的，不会相互影响。而这项技术被称之为 Shadow DOM （影子 DOM）。

什么是 Shadow DOM?

Shadow DOM 是一个较小的、独立的 DOM，它与主 DOM 分开渲染，允许我们将样式和标记行为隔离到单个组件中。Shadow DOM 本质上允许我们将组件功能进行封装和隔离，我们可以单独对其设置样式、编写功能脚本，而不会干扰应用程序的其余元素。
你大概对 Web Component 有一个基本的认识，下面我们开始用 Svelte 来编写一个简单的组件。

构建 Web Component

准备工作

为了完成本文剩余的内容学习，需要你对掌握以下知识：

对 HTML, CSS 和 JavaScript 有基本的认识

熟悉命令行操作环境

需要一个文本编辑器

最好对 Svelte 有一些基本的了解（可以看看我之前翻译的文章 https://my.oschina.net/javayou/blog/5309554 ）

开始

本文我们将开发两个组件：

第一个组件是一个卡片组件，接收三个属性分别是：卡片标题、卡片描述以及图片，该组件名为 

第二个组件是一个带样式的按钮，接收一个 type 的属性，通过该属性来确定按钮的显示样式，组件名称为 

同时我们将使用两种组件的发布方式，一个是打包到单一文件，另外一个是每个组件发布到一个独立的文件中。

下图显示的是两个组件运行后的外观：
 
我们从创建一个 Svelte 应用开始，并安装必须的包：
 

npx degit sveltejs/template web-component-tut
cd web-component-tut
npm install

 

上述命令执行完毕就可以使用如下命令启动一个测试环境：

 

npm run dev

然后我们打开浏览器访问 http://localhost:8080 就可以看到一个最基础的 Svelte 应用运行起来后的样子：
 

开发一个组件

使用 Svelte 生成通用 Web Component 的过程类似于创建常规 Svelte 组件的过程，只是进行了一些修改。

为了创建第一个卡片组件，我们首先创建一个文件 src/Card.svelte 并定义组件的属性、样式以及 HTML 标签，代码如下：

  
    
      
      
        
          
            
{card_title}