网络组件比您想象的要容易

Web组件：一旦令人生畏，现在就可以访问了。我过去在会议上的经历描绘了一幅复杂的JavaScript庞然大物的照片，似乎超过了好处。但是，最近的一个项目着重于简化HTML学习（自然而然地使用僵尸和幽默！），迫使人们更深入地深入研究<slot></slot>和<template></template>。结果？网络组件比我记得的要容易得多。

一系列简单的步骤

本文是探索Web组件的系列中的第一篇：

• Web组件比您想象的要容易（当前文章）
• 交互式网络组件比您想象的要容易
• 在WordPress中使用Web组件比您想象的要容易
• 带有Web组件的内置元素比您想象的要容易
• 上下文感知的网络组件比您想象的要容易
• Web组件伪级和伪元素比您想象的要容易

我最初的忧虑可能掩盖了现代网络组件的现实。让我们消除神话，一起建立一个组件。

基金会：<template></template>

这<template></template>元素为我们的组件提供HTML结构。它可能非常简单：

<template>
  <p>僵尸即将到来！</p>
</template>

这构成了我们的基础<apocalyptic-warning></apocalyptic-warning>组件 - 及时提醒僵尸启示录。

自定义<slot></slot>

<slot></slot>允许我们自定义模板的渲染内容。例如：

<template>
  <p>这<slot>僵尸</slot> 来了！</p>
</template>

没有进一步的规格，<slot></slot>默认为其封闭内容（“僵尸”）。 name属性提供了更多控制：

<template>
  <p>这<slot name="whats-coming">僵尸</slot> 来了！</p>
</template>

这会创建一个“想法”的插槽，允许灵活的内容插入（机器人，狼人，甚至是Web组件启示录！）。

组件实现

现在，让我们使用组件：

<apocalyptic-warning>吸血病负责亡灵小兵</apocalyptic-warning>

这<apocalyptic-warning></apocalyptic-warning>组件的行为就像标准HTML元素。标签中的内容取代了“僵尸”占位符。请记住：自定义元素名称必须包括连字符（以防止与未来的HTML元素命名冲突）。

组件注册（JavaScript）

尽管某些JavaScript是必要的，但它比预期的要少得多。构造函数函数注册自定义元素：

 customElements.define（“ apocalyptic-warning”，类扩展htmlelemt {
  constructor（）{
    极好的（）;
    让警告= document.getElementById（“ WarningTemplate”）;
    让mywarning = parnning.content;
    const shadowroot = this.attachshadow（{mode：“ open”}）。附录（mywarning.cloneNode（true））;
  }
}）;

评论的代码解释了每个步骤。关键路线：

 const shadowroot = this.attachshadow（{mode：“ open”}）。附录（mywarning.cloneNode（true））;

创建一个阴影DOM（使用mode: "open"用于外部JavaScript访问），附加克隆模板，并集成<slot></slot>机制。

使用CSS造型

CSS样式很简单。包括

<template>
  <style>
    p { background-color: pink; padding: 0.5em; border: 1px solid red; }
  </style>这<slot name="whats-coming">僵尸</slot>来了！</template>

阴影圆顶确保样式封装。当插入的内容位于模板之外时，它是自定义元素的一部分，允许外部CSS选择器对其进行样式。但是，外部样式无法直接访问<template></template>或阴影dom。

一个完整的例子：僵尸约会资料

让我们建立一个<zombie-profile></zombie-profile>组件，展示两个内部

The JavaScript remains similar, changing only the component name:

customElements.define("zombie-profile", class extends HTMLElement { /* ... */ });

The HTML template includes encapsulated CSS:

<template>
  <style> /* ... CSS styles ... */ </style>
<code><div>...</div></code>外部CSS（默认内容和开槽内容）：<pre class="brush:php;toolbar:false"> Zombie-Profile { / * ...样式... * /}

这种整体方法证明了Web组件的力量和简单性。

尽管存在微妙之处，但核心概念是可以访问的。尝试您项目中的Web组件，以欣赏它们的易用性和利益。现在，唯一真正的恐惧是...僵尸启示录（以及我的每日diem是否涵盖小吃）。

以上是网络组件比您想象的要容易的详细内容。更多信息请关注PHP中文网其他相关文章！