头图

得物技术Web Components初探

得物技术

简介

在我们的日常工作中,'组件'一词很是熟悉。无论是在react、vue项目中,都经常会去封装一些自定义个性化的组件,来达到某些特定的功能,但是这些组件都需要外部模块的支持。Web Components API便提供了一种方式,在不依赖外部模块的情况下封装自定义的组件。

Web Components API 介绍

它由三项主要技术组成:

  • Custom elements(自定义元素):一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。
  • Shadow DOM(影子DOM):一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
  • HTML templates(HTML模板): template 和 slot 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

Custom elements(自定义元素)

自定义元素 Custom elements 是 Web components 技术的核心。

CustomElementRegistry

CustomElementRegistry:包含自定义元素相关功能。

CustomElementRegistry.define()方法可以用来注册新的自定义元素。

window.customElements返回的就是CustomElementRegistry对象的引用。

注意点:

  • 自定义元素类的基类是 HTMLElement ,所以继承了 HTML 元素的特性。也可以继 HTMLElement 的子类,比如 HTMLDivElement 、 HTMLTableElement 、 HTMLButtonElement 等。
  • 自定义元素标签的名称必须包含连字符 - ,用来和内置的HTML标签做区别。
  • 浏览器如果没有解析到自定义元素,会当做空的 div 元素处理。
class MyComponent extends HTMLElement {
  constructor() {
    super();
    // ...
  }
}
// 注册一个自定义元素
window.customElements.define('my-component', MyComponent);

创建自定义内置元素的扩展

is 属性:HTML的全局属性,使用 is 属性可以把一个HTML的内置属性标记成一个已注册的自定义内置元素。

class NewButton extends HTMLButtonElement {
  // ...
}
// 注册时,提供元素的扩展
window.customElements.define('new-button', NewButton, { extends: 'button' })

// 使用时
<button is="new-button">NewButton</button>

生命周期

自定义组件的特殊回调函数:

class MyComponent extends HTMLElement {
  constructor() {
    super()
    
  }
  
  connectedCallback(){
    // 当自定义元素第一次被连接到文档DOM时被调用
  }
  disconnectedCallback(){
    // 当自定义元素与文档DOM断开连接时被调用
  }
  adoptedCallback(){
    // 当自定义元素被移动到新文档时被调用
  }
  attributeChangedCallback(){
    // 当自定义元素的一个属性被增加、移除或更改时被调用
  }
}

自定义方法和属性

自定义元素就是javascript的类,因此自定义元素的方法和属性的用法和class一样。

class MyComponent extends HTMLElement {
  constructor() {
    super()
    
  }
  // 自定义方法
  hello() {
    const name = this.getAttribute('name')
    console.log('hello' + name)
  }
  
  // 也可以设置取值器和赋值器
  set name(name) {
    const oldName = this.getAttribute('name')
    if(name !== oldName) {
      this.setAttribute('name', name)
    }
  }
  get name() {
    return this.getAttribute('name')
  }
}
window.customElements.define('my-component', MyComponent);

// 使用
<my-component name="zhangsan"></my-component>

const el = document.querySelector('my-component');
el.hello();

css伪类

  • :defined :匹配任何已定义的元素,包括内置元素和自定义的元素。
  • :host :Shaow Host,组自定元素挂载的节点。

Shadow DOM(影子DOM)

如果我们希望自定义元素的内部代码不允许被外部访问到,我们可以设置Shadow DOM来将其与外部隔离,这样外部的设置无法影响到其内部,而内部的设置也不会影响到外部。

Shadow DOM 特有的术语:

  • Shadow host:一个常规 DOM节点,Shadow DOM 会被附加到这个节点上。
  • Shadow tree:Shadow DOM内部的DOM树。
  • Shadow boundary:Shadow DOM结束的地方,也是常规 DOM开始的地方。
  • Shadow root: Shadow tree的根节点。

Shadow DOM 最大的好处:

  • 向用户隐藏细节,直接提供组件。
  • 可以封装内部样式表,不会影响到外部。

例子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Web Components</title>
  <style>
    .btn {
      color: #000;
      font-size: 30px;
    }
  </style>
</head>
<body>
<button class="btn">获取shadowRoot</button>
<my-component></my-component>
</body>
<script>
 class MyComponent extends HTMLElement {
  constructor() {
    super();
    var con = document.createElement('div');
    con.classList.add('btn');
    con.innerHTML = "自定义元素";

    let style = document.createElement('style');
    style.innerText = '.btn { font-weight: 600; color: red;}';

    this.appendChild(style);
    this.appendChild(con);
  }
}
window.customElements.define('my-component', MyComponent); 
</script>
</html>

不使用shadow Dom

在不使用shadow Dom的时,内外部样式相互影响,优先级受选择器和加载顺序影响。

使用shadow Dom

使用shadow Dom的时,内外部样式互不影响。

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // 使用 shadow dom
    var shadow = this.attachShadow( { mode: 'open' } );
    var con = document.createElement('div');
    con.classList.add('btn');
    con.innerHTML = "自定义元素";

    let style = document.createElement('style');
    style.innerText = '.btn { font-weight: 600; color: red;}';

    shadow.appendChild(style);
    shadow.appendChild(con);
  }
}

mode设置

通过设置 mode 为 open 或 closed 能够控制是否可以在外部访问到组件的shadowRoot。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Web Components</title>
  <style>
    .btn {
      color: #000;
      font-size: 30px;
    }
  </style>
</head>
<body>
<button class="btn">获取shadowRoot</button>
<my-component></my-component>
</body>
<script>
 class MyComponent extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow( { mode: 'open' } );
    var con = document.createElement('div');
    con.classList.add('btn');
    con.innerHTML = "自定义元素";

    let style = document.createElement('style');
    style.innerText = '.btn { font-weight: 600; color: red;}';

    shadow.appendChild(style);
    shadow.appendChild(con);
  }
}
window.customElements.define('my-component', MyComponent); 

const btn = document.querySelector('.btn')
btn.addEventListener('click',() => {
  const el = document.querySelector('my-component');
  // 获取 shadowRoot
  console.log(el.shadowRoot)
})
</script>
</html>

当 mode:'open' 时,点击获取shadowRoot按钮:

当 mode:'closed' 时,点击获取shadowRoot按钮:

HTML templates(HTML模板)

template模版

上文中在JavaScript中撸dom、style是很麻烦的一件事。Web Components API提供了 template 标签,包含一个HTML片段,不会在文档初始化时渲染。但是可以在运行时使用JavaScript显示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<my-component
  title="这是标题"
  content="这是内容这是内容这是内容这是内容这是内容这是内容"
></my-component>
  
<template id="template">
  <style>
   :host {
     display: flex;
     align-items: center;
     width: 450px;
     height: 180px;
     background-color: #ccc;
     border-radius: 8px;
   }
   .container {
     margin: 20px;
     height: 150px;
   }
   .container > .title {
     font-size: 24px;
     line-height: 30px;
     margin-bottom: 15px;
   }
   .container > .content {
     padding: 10px;
     font-size: 14px;
   }
  </style>
  
  <div class="container">
    <p class="title"></p>
    <p class="content"></p>
  </div>
</template>

</body>
<script>
class MyComponent extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow( { mode: 'closed' } );
    
    var template = document.getElementById('template');
    var content = template.content.cloneNode(true);
    content.querySelector('.container>.title').innerText = this.getAttribute('title');
    content.querySelector('.container>.content').innerText = this.getAttribute('content');

    shadow.appendChild(content);
  }
}
window.customElements.define('my-component', MyComponent);
</script>
</html>

Slot

slot> 元素,也叫插槽。作为Web Components技术的一部分,是Web组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充,这样您就可以创建单独的DOM树,并将它与其它的组件组合在一起。插槽也分为默认插槽和具名插槽。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<my-component>
  <div slot="left">left</div>
  <div slot="right">right</div>
  <div>content</div>
</my-component>
<template id="template">
  <style>
   :host {
     display: flex;
     align-items: center;
     width: 480px;
     height: 180px;
     background-color: #ccc;
     border-radius: 8px;
   }
   .container {
     display: flex;
   }
   .container > .con {
     height: 100px;
     width: 100px;
     flex-grow: 1;
     font-size: 24px;
   }
  </style>
  
  <div class="container">
    <p class="con">
      <slot name="left"></slot>
    </p>
    <p class="con">
      <slot></slot>
    </p>
    <p class="con">
      <slot name="right"></slot>
    </p>
  </div>
</template>

</body>
<script>
class MyComponent extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow( { mode: 'closed' } );
    var template = document.getElementById('template');
    var content = template.content.cloneNode(true);
    shadow.appendChild(content);
  }
}
window.customElements.define('my-component', MyComponent);
</script>
</html>

参考文献

MDN Web Components:
https://developer.mozilla.org...

文|zhousibao
关注得物技术,携手走向技术的云端

阅读 133
129 声望
1.1k 粉丝
0 条评论
你知道吗?

129 声望
1.1k 粉丝
宣传栏