LitElement：使用 Web 组件

2 月 5 日，谷歌宣布 LitHTML 终于发布了第 1 版，LitElement 也发布了第 2 版。为了庆祝，我将研究一下 Web 组件，并使用指南将我的材料设计开关转换为元素。

无障碍第一：拨动开关

目标是只需编写一些简单的 HTML 代码，就能重新获得一个简洁、美观且易于访问的切换开关。我将使用 JSFiddle 来演示各个步骤。

<md-switch>Toggle switch</md-switch>

这部分包含 3 个步骤，我们需要完成这些步骤才能注册我们的元素。我们用 JavaScript 完成这些步骤。

通过导入项目，我没有在本地拥有它，但我知道我可以看到它托管在这里，https://unpkg.com/lit-element/lit-element.js?module这就是为什么我的导入行说要从那里LitElement获取。html

任何项目中最重要、最难的部分就是命名。创建 Web 组件时，名称必须包含连字符，例如foo-bar。按照惯例，我们应该将类名与元素名相同，但要删除连字符，并且每个新单词的首字母都要大写，例如FooBar。我们的项目名为md-switch。

render 函数定义了组件的模板。你必须为每个 LitElement 组件实现 render 函数。

我们的渲染是一个包含“Hello world！”的简单段落。

最后，我们需要注册该元素。在这里，我们让浏览器知道md-switch元素与 MdSwitch 类相关联。

现在让我们获取开关的 HTML。如果你想了解标记和样式背后的逻辑，建议你阅读我之前在上面链接的帖子。

<label class="md_switch">
  <input type="checkbox" />
  <span class="md_switch__toggle"></span>
  Toggle switch
</label>

你会注意到开关的标签文本是静态的。这时就slots派上用场了。它们允许你将 HTML 中标签之间的数据/文本提取出来，然后“插入”到你的模板中。

现在我们来看看属性。实际上，我们的开关是一个风格化的复选框，因此需要所有相同的属性/特性。在本例中，我只会包含已选中和已禁用状态，因为它们是最重要的，并且能够让你更好地了解如何实现更多功能。

要添加属性，我们需要添加一个对象来包含它们。litElement 的实现方法是使用名为 Properties 的静态 get 方法。

我们的对象应该包含checked这disabled两个Boolean值，并且都是我们元素的属性。

{checked:  { type: Boolean, attribute: true }}

这很好，但现在我们需要将这些属性传递给模板。因为我们的属性是布尔值，所以我们可以使用?运算符，如下所示：

?checked="${this.checked}"

在本项目中，我们不需要对事件进行太多处理，但我们确实希望保持输入框的选中状态与元素的选中状态同步。最简单的方法是创建一个onchange事件，md-switch当输入框的选中状态发生变化时，更新元素的选中状态。

我们用操作符来实现这一点@。在模板中，我们指定@eventname="{this.functionName}"了 change 事件，因此@change我们还需要一个新的函数。

要添加样式，我们需要添加css到初始导入中。然后，我们需要一个静态的名为 style 的 get 方法，它会返回一些 CSS 代码，就这样。

就是这样。Web 组件让元素的复用变得非常简单，但你不必自己创建所有元素。有一个叫https://www.webcomponents.org/的网站，里面有成千上万个元素可供你在项目中使用，但有些元素比其他元素更好，所以要谨慎选择。

希望您能理解我的观点，也期待看到您亲手制作的元素。感谢您的阅读！

🦄🧠💕🦄🦄💕❤🧠💕❤