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 属性来访问。

相关推荐
老兵发新帖20 分钟前
pnpm常见报错解决办法
前端
Sonetto199928 分钟前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin28 分钟前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快44 分钟前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛1 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼1 小时前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_1 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
还是鼠鼠1 小时前
Android移动应用开发入门示例:Activity跳转界面
android·前端·gitee·android studio·android-studio
不知疲倦的仄仄1 小时前
跨域 同源策略通俗讲解
前端·后端·spring·edge浏览器
珹洺1 小时前
Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示,实现前后端交互
java·运维·前端·mysql·intellij-idea·jsp