Web Components 是什么

Web Components 是一套不同的 web 标准,它们允许开发者创建可重用的自定义元素(通过封装 JavaScript 类来定义),这些元素封装了 HTML、CSS 和 JavaScript。

Web Components 主要包括以下几个部分:

  1. Custom Elements:允许开发者定义自己的元素,扩展 HTML。
  2. Shadow DOM:提供了一种将一个 Web Component 的内部实现细节隐藏起来的方法,从而创建一个封装的影子树(shadow tree)。
  3. HTML Templates:提供了一个客户端的模板系统,允许开发者定义客户端的 DOM 树,这些树在页面加载时是隐藏的,直到被 JavaScript 激活。
  4. HTML Imports:一种浏览器技术,允许开发者将 HTML 文档导入到其他 HTML 文档中,类似于 CSS 和 JavaScript 的 @import。

Custom Elements代码示例

javascript 复制代码
// 定义一个新的元素 'my-element'
class MyElement extends HTMLElement {
  constructor() {
    super(); // 调用 HTMLElement 的构造函数
    this.attachShadow({ mode: 'open' }); // 创建一个 Shadow DOM
    this.shadowRoot.innerHTML = `<style>p { color: red; }</style><p> Hello, World! </p>`;
  }
  
  // 定义一个方法,可以在元素上调用
  sayHello() {
    console.log('Hello from MyElement!');
  }
}

// 定义元素
customElements.define('my-element', MyElement);

// 使用新的元素
const myEl = document.createElement('my-element');
document.body.appendChild(myEl);
myEl.sayHello(); // 输出:Hello from MyElement!

Shadow DOM 代码示例

允许将一个 Web Component 的内部实现细节隐藏起来

javascript 复制代码
class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>:host { color: red; }</style>
      <slot>Default content</slot>
    `;
  }
}

customElements.define('my-component', MyComponent);

const myComponent = document.createElement('my-component');
myComponent.shadowRoot.querySelector('slot').addEventListener('click', () => {
  console.log('Slot clicked');
});

document.body.appendChild(myComponent);
//my-component 是一个自定义元素,它使用了 Shadow DOM 来封装样式和内容。<slot> 元素用于插入外部内容。

HTML Templates 代码示例

HTML Templates 提供了一个客户端的模板系统:

javascript 复制代码
<template id="my-template">
  <style>p { color: green; }</style>
  <p>This is a template.</p>
</template>

<script>
  class MyTemplateElement extends HTMLElement {
    constructor() {
      super();
      const template = document.querySelector('#my-template');
      const instance = template.content.cloneNode(true);
      this.appendChild(instance);
    }
  }

  customElements.define('my-template-element', MyTemplateElement);
</script>

<my-template-element></my-template-element>
//<template> 标签定义了一个模板,MyTemplateElement 类使用这个模板来创建一个自定义元素的实例。

this.attachShadow是什么

this.attachShadow 是一个方法,它属于 Web Components 规范的一部分,用于在自定义元素(Custom Elements)上创建一个 Shadow DOM。Shadow DOM 是一种浏览器技术,它允许开发者将一个 Web Component 的内部实现细节隐藏起来,创建一个封装的影子树(shadow tree),这样可以避免样式和脚本冲突,实现更好的封装和组件化。

基本用法

当你在自定义元素的类中调用 this.attachShadow 方法时,你需要传递一个对象作为参数,该对象包含一个 mode 属性,它定义了 Shadow DOM 的模式:

  • open:默认值,允许 JavaScript 访问 Shadow DOM 树。
  • closed:Shadow DOM 树对 JavaScript 来说是不可见的,无法通过 JavaScript 访问。

示例代码

下面是一个使用 this.attachShadow 的示例:

复制代码
class MyElement extends HTMLElement {
  constructor() {
    super(); // 调用父类的构造函数
    this.attachShadow({ mode: 'open' }); // 创建一个可访问的 Shadow DOM
    this.shadowRoot.innerHTML = `<style>p { color: red; }</style><p> Hello, World! </p>`;
  }
}

customElements.define('my-element', MyElement);

const myEl = document.createElement('my-element');
document.body.appendChild(myEl);

MyElement 是一个自定义元素,它使用 this.attachShadow 方法创建了一个 Shadow DOM。然后,它将一些 HTML 和 CSS 插入到 Shadow DOM 中。由于使用了 { mode: 'open' },这个 Shadow DOM 是可访问的,可以通过 this.shadowRoot 属性来访问。

相关推荐
庸俗今天不摸鱼27 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下34 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox44 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring