了解Web组件及其实施没有框架
#javascript #html #网络开发人员 #Web组件

曾经想过自定义的HTML元素如何在现代框架（例如React，Angular，Vue等）中起作用？不使用任何框架。您需要的是HTML和Vanilla JavaScript。不用担心，我们将在下一集中介绍样式。敬请期待！

a 自定义HTML元素，也称为A Web组件，是HTML中的一个自定义标签，可扩展浏览器的内置元素。它允许开发人员创建自定义功能和行为，该功能封装在单个标签中。这些元素可以在各个项目中重复使用，使代码更可维护和可扩展，而无需与特定的框架或库相关。 Web组件旨在通过提供创建和共享可重复使用组件的标准化方法来增强Web开发。

自定义HTML元素的工作方式：

自定义的HTML元素或Web组件，利用 shadow dom 和自定义元素API 有效地运行。

  1. 阴影dom： Shadow dom允许通过在自定义元素中创建隐藏的DOM子树来封装。这种隔离可以防止样式和脚本泄漏出来，确保组件的内部结构和样式不会干扰页面的其余部分。

  2. 自定义元素API：此API使开发人员能够定义新的自定义元素及其行为。通过使用customElements.define()方法，开发人员可以及其相应的类构造函数注册新的标签名称。该关联允许浏览器在HTML代码中出现时识别和实例化。

一旦注册，开发人员可以定义自定义元素的生命周期回调，例如connectedCallback()和disconnectedCallback()，以处理元素插入和删除事件。此外，自定义元素可以具有自己的属性，属性和方法来管理其行为。

通过将阴影DOM和自定义元素API结合在一起，开发人员可以使用自定义功能创建可重复使用的封装组件，从而释放Web组件在现代Web开发中的潜力。我们稍后将讨论Shadow dom，所以让我们开始吧！

创建一个新的项目文件夹并打开您的首选代码编辑器：

开始，为我们的项目启动新鲜文件夹。接下来，使用文件资源管理器导航到文件夹，然后打开首选的代码编辑器。这将是我们开发旅程的起点。

设置项目文件夹并启动您喜欢的代码编辑器后，继续创建两个名为index.html和app.js的文件。这些文件将作为我们项目的基础，使我们能够有效地构建和构建Web应用程序。

这是我们的index.html文件应该看起来像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom HTML Elements</title>
    <script src="app.js" type="module"></script>
</head>
<body>
</body>
</html>

如果您注意到我将脚本的类型声明为module，因为我想导入所有自定义HTML元素那里。

这是我们的app.js文件对于启动器的外观：

const app = () => {
  console.log('DOM Content Loaded')
}

document.addEventListener('DOMContentLoaded', app)

在此文件中，我们将导入所有自定义HTML元素并仅在发生DOMContentLoaded事件时加载它们。

让我们开始创建新文件夹并组织我们的自定义HTML元素。

步骤1：在项目根目录中创建一个新文件夹。我们将其称为components或任何适合您的东西。

步骤2：在components文件夹中，创建另一个称为hello-world的文件夹。

步骤3：在hello-world文件夹中，创建必要的JS文件。

完成了这些步骤后，您的项目结构应该看起来像：

- project-root
  - components
    - hello-world
      - hello-world.js

让我们看一下hello-world.js，它是空的，对吗？现在让我们编写一些代码。

class HelloWorld extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = "<p>hello world</p>";
  }
}

customElements.define("hello-world", HelloWorld);

使用此代码，我们定义了扩展HTMLElement的类HelloWorld。在构造函数内部，我们称为super()以确保适当的继承。然后，在connectedCallback方法中，我们将自定义元素的内部HTML设置为<p>hello world</p>。

现在，当您将hello-world.js脚本包含在html文件中并使用自定义元素<hello-world>时，它将呈现connectedCallback方法中指定的“ hello world”消息。

您的index.html文件应该看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom HTML Elements</title>
  <script src="app.js" type="module"></script>
</head>
<body>
  <hello-world></hello-world>

  <script src="components/hello-world/hello-world.js"></script>
</body>
</html>

就是这样！我们已经爆炸了，探索Web组件的基础知识以及如何从头开始创建自己的自定义元素，而无需任何框架！

但是猜怎么着？我们才刚刚开始！在我的下一个博客系列中，我很高兴带您前往动态组成部分的旅程。 ð我们将学习如何使我们的Web组件交互式和数据驱动，从而为他们提供超级大国以创建更酷，更灵活的Web应用程序。

所以，抓住您的编码装备，为一些认真的乐趣做好准备！请继续关注即将推出的博客系列，我们将在其中深入研究动态网络组件的激动人心的世界。在此之前，愉快的编码，我将在下一部分中抓住您！ ð