Web组件简介

2024年2月21日 197次阅读 来源: _小生_

Web组件是什么？

Web组件由三个自力的手艺组成：

这些是组成Web组件范例的内容。

HTML模块(
HTML Modules)多是客栈中的第四种手艺，但它尚未在四大浏览器中完成。Chrome团队已宣告有意在将来版本中实行这些内容。

除Microsoft Edge和Internet Explorer 11外，Web组件一般可在一切主流浏览器中运用，但也有东西能够添补这些空缺。

每种手艺能够自力运用或与任何其他手艺组合运用。换句话说，它们并非互相排挤的。

Custom elements(自定义元素)

望文生义，自定义元素是HTML元素，如<div>，<section>或<article>，但我们能够经由过程浏览器API定义本身的称号。自定义元素就像那些规范的HTML元素，如<news-slider>或<bacon-cheeseburger>。展望将来，浏览器供应商已许诺不会在称号中建立包含短划线的新内置元素以防备争执。

自定义元素包含本身的语义，行动，标记，能够跨框架和浏览器同享。

JS

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Hello world</h1>`;
  }
}
    
customElements.define('my-component', MyComponent);
HTMl

<my-component></my-component>

Result
Hello world

在这个例子中，我们定义了<my-component>，我们本身的HTML元素。不可否认，它没有做太多，但这是自定义元素的基础构建块。一切自定义元素必需以某种体式格局扩大HTMLElement才能在浏览器中注册。

存在没有第三方框架的自定义元素，浏览器供应商致力于范例的延续向后兼容性，除了保证依据范例编写的组件不会损坏API变动。更主要的是，这些组件一般能够与现有最盛行的框架一同运用，包含Angular，React，Vue等，只需要很少的事情量

Shadow DOM

shadow DOM是DOM的封装版本。这许可作者有用地将DOM片断相互断绝，包含能够用作CSS挑选器的任何东西以及与它们相关联的款式。一般，文档范围内的任何内容都称为light DOM，而shadow root中的任何内容都称为shadow DOM。

运用light DOM时，能够运用document.querySelector（'selector'）或经由过程运用element.querySelector（'selector'）定位任何元素的子元夙来挑选元素;以一样的体式格局，能够经由过程挪用shadowRoot.querySelector来定位影子根的子节点，个中shadowRoot是对文档片断的援用 – 差别之处在于影子根的子节点不能从轻型DOM中挑选。比方，假如我们在个中有一个带有<button>的影子根，则挪用shadowRoot.querySelector（'button'）将返回我们的按钮，然则不挪用该文档的查询挑选器将返回该元素，由于它属于差别的DocumentOrShadowRoot实例。款式挑选器以雷同的体式格局事情。

在这方面，影子DOM的事情类似于<iframe>，个中内容与文档的其余部份断绝;然则，当我们建立一个影子根时，我们依然能够完整掌握页面的那一部份，然则作用于上下文。这就是我们所说的封装。

假如您曾编写过重用雷同内容的组件或依赖于CSS-in-JS东西或CSS定名战略（如BEM），那末shadow DOM有能够改良您的开发人员体验。

设想一下以下场景：

<div>
  <div id="example">
    <!-- Pseudo-code used to designate a shadow root -->
    <#shadow-root>
      <style>
      button {
        background: tomato;
        color: white;
      }
      </style>
      <button id="button">This will use the CSS background tomato</button>
    </#shadow-root>
  </div>
  <button id="button">Not tomato</button>
</div>

除了<＃shadow-root>的伪代码（此处用于分别没有HTML元素的暗影边境），HTML完整有用。要将暗影根附加到上面的节点

类似于：

const shadowRoot = document.getElementById('example').attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>
button {
  color: tomato;
}
</style>
<button id="button">This will use the CSS color tomato <slot></slot></button>`;

HTML templates

HTML <template>元素许可我们在一般的HTML流程中删除可重复运用的代码模板，这些模板不会马上显现，但能够在今后运用。

HTML
<template id="book-template">
  <li><span class="title"></span> &mdash; <span class="author"></span></li>
</template>

<ul id="books"></ul>

上面的示例在剧本运用模板之前不会显现任何内容，实例化后代码将通知浏览器怎样处置惩罚它。

JS
const fragment = document.getElementById('book-template');
const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: 'A Farewell to Arms', author: 'Ernest Hemingway' },
  { title: 'Catch 22', author: 'Joseph Heller' }
];

books.forEach(book => {
  // Create an instance of the template content
  const instance = document.importNode(fragment.content, true);
  // Add relevant content to the template
  instance.querySelector('.title').innerHTML = book.title;
  instance.querySelector('.author').innerHTML = book.author;
  // Append the instance ot the DOM
  document.getElementById('books').appendChild(instance);
});

请注意，此示例在没有任何其他Web组件手艺的情况下建立模板（<template id =“book-template”>），再次申明客栈中的三种手艺能够零丁运用或配合运用。

    原文作者：_小生_
    原文地址: https://segmentfault.com/a/1190000018659787
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞