我们的第一个 Web 组件

mstmahmuda11121

任何文本编辑器、VS Code或WebStorm都可以用于此目的。此外，还应安装 Node.js 和 Google Chrome。在我们将进行开发的新文件夹中，我们启动命令行并执行以下命令： npm init -y 此命令创建一个具有默认内容的新 package.json 文件。如果此命令失败，则 Node.js 可能未安装（正确）。然后我们运行以下命令： npm install -D browser-sync 这将安装一个名为Browsersync的工具。首先，我们将其用作小型 Web 服务器，以便我们可以尝试我们的 Web 组件。另一方面，如果源代码有更改，它会自动重新加载浏览器，以便我们始终可以看到最新的开发状态。为了实现此目的，我们打开 package.json 文件并在脚本部分添加第二个脚本 此命令将启动 Browsersync，在 src 目录 (–server) 中打开 Web 服务器并监视那里的所有文件 (–files)。

最后一个参数 –no-open 指定命令启动时不应自动启动浏览器。 我们还没有创建 src 目录 瑞士 电话号码 我们现在就这样做，并在其中放置一个名为 index.html 和以下内容的 HTML 文件 该文件已经引用了我们尚未创建的 JavaScript 文件。因此，我们创建一个名为 counter.js 的空文件。 为了完成准备工作，我们在命令行中调用以下命令： npm start 这将启动我们的浏览器同步。 URL 将在命令行中输出，我们在 Google Chrome 中打开该命令行。通常，URL 是。 1. 标准：自定义元素 通过自定义元素，我们可以向浏览器传授新的 HTML 元素，并用我们选择的内容填充它们。为此，浏览器为我们提供了一个所谓的自定义元素注册表。它允许我们注册新元素、查询某些元素是否已经可用或等待元素可用。 为了在浏览器中注册我们自己的元素，我们需要以下代码作为基本结构我们需要一个至少继承自 HTMLElement 类并调用超级构造函数的类。




此外，必须调用其第一个参数是要注册的元素/HTML 标记的名称，第二个参数是用于创建的类。例如，如果您想创建一个扩展输入的 Web 组件，您可以继承 HTMLInputElement 而不是 HTMLElement，从而获得该元素的标准行为。 接下来我们可以将index.html中的HTML元素插入到正文中但是，目前我们在浏览器中看不到任何内容，因为我们尚未保存 HTML 模板。 2. 标准：HTML模板 在此步骤中，我们希望以HTML 模板的形式提供组件的外观。为此，我们使用以下代码，将其插入到counter.js 中的类前面将模板标签附加到 DOM 中进行测试，我们也只能在 DevTools 中看到浏览器处理它并创建一个 #document 片段，但不会创建模板的实例有（图1）。 让我们仔细看看 CSS。这里有两件事引人注目。