[Day10] - Tab页签切换效果 - Web Component 的样式设定

在 Web Component 中有些特别的 css styling 可以设定 ,

ex : 如果我们想要设定元件根元素 (Root Element) 的底色时 , 可以使用 :host 来做设定

如果我们想要根据外部的 dom 设定 根元素的底色时 , 可以使用 :host-context(.dark-wrap) 来做设定

shadow-dom 提供将样式内外隔离的方式 , 但是当我们真的需要设定一些内外都要有的样式时 ,

我们可以用 my-tab::part(tab-head) 来做设定 , 它会穿过 shadow-dom 将我们想设定的样式给设定上去

如果想要指定 slot 的底色 , 举例想要设定 day-08 的 modal-body 它的底色 , 可以用 ::slotted(*) 来做设定

以下整理跟 Web Component 相关的 styling 有哪些

下面我们就使用常用的 Tab 页签 , 来学习 Web Component 中有哪些特别的 css 设定吧 !

简易范例

下面我们用一些范例来说明上面表列的那些样式设定吧 !

:host 相关设定的解说

<div class="dark-wrap">
    <x-foo class="foo">
      <"shadow tree">
        <link rel="stylesheet" href="./inner.css">
        <div class="foo">...</div>
      </>
    </x-foo>
</div>

在 inner.css 中设定以下内容 , 将会设定对应的样式

• :host matches the element.
• x-foo matches nothing.
• .foo matches only the element.
• .foo:host matches nothing
• :host(.foo) matches the element.

::slotted() 相关设定的解说

<link rel="stylesheet" href="./outer.css">
<x-foo>
  <div id="one" slot="foo" class="foo">...</div>
  <div id="two" slot="foo">...</div>
  <div id="three" class="foo">
    <div id="four" slot="foo">...</div>
  </div>
  <"shadow tree">
    <div id="five" part="bar">...</div>
    <div id="six">...</div>
    <slot name="foo"></slot>
  </"shadow tree">
</x-foo>

在 outer.css 中设定以下内容 , 将会设定对应的样式

• a selector like ::slotted(*) is equivalent to ::slotted(), where the * selects many more elements than just the slot element. However, since only the slot elements are slots, they’re the only elements with a ::slotted() pseudo-element as well.
• A selector like ::slotted(.foo), on the other hand, will only select #one, as it matches .foo, but #two doesn’t.
• x-foo::part(bar) matches the #five element.

实作开始

建立 tab.css

*, *::before, *::after {
  box-sizing: border-box;
}

.tab-head {
  color: #000;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
  display: flex;
}

.tab-head .item {
  cursor: pointer;
  font-size: 20px;
  padding: 8px 16px;
  height: 100%;
  display: flex;
  align-items: center;
}

.tab-head .item:hover {

  background-color: #ccc;
}

.tab-head .item.active {

  color: #fff;
  background-color: #616161;
}

/* 所有使用 CustomElementRegistry.define() 的 Tag 都上色 */
:defined {
  border-left: 2px solid rebeccapurple;
}

/* component 的根 styling */
:host {

  width: 1000px;
  border: 1px solid #ccc;
  box-shadow: 8px 8px 10px 2px rgba(0,0,0,0.5);
}

/* 根据 tag 上的属性来设定 :host 的样式 */
:host(.bg-light-green) {
  background-color: #66ff16;
}

/* 根据外部的 dom 来设定 :host 的样式 */
:host-context(.thin) {
  width: 700px;
  box-shadow: none;
}

/* Selects any <span> placed inside a slot */
::slotted(div) {
  font-weight: 900;

  padding: 8px 24px;
  background-color: #ffffff;
  animation: fadeIn 0.5s ease-in-out;
}

建立 tab.js

// tab.js
class MyTab extends HTMLElement {

  connectedCallback() {

    const tabHeaders = [...this.querySelectorAll('.item')]

    const tabBodies = [...this.querySelectorAll('[slot]')]

    const tabBodyStr = tabBodies
      .map(tabContent => `<slot name="${tabContent.getAttribute('slot')}" class="city tab-body"></slot>`)
      .join('')

    const styleStr = `<link rel="stylesheet" href="./tab.css">`

    const htmlStr = `
        <div class="tab-head" part="tab-head">
          ${tabHeaders.map(head => head.outerHTML).join('')}
        </div>
        ${tabBodyStr}
    `

    this.attachShadow({mode: 'open'}).innerHTML = styleStr + htmlStr;

    const items = this.shadowRoot.querySelectorAll('.item');
    [...items].map(item => item.addEventListener('click', e => this._tabClick(e)))
  }

  _tabClick(e) {

    const tabName = e.target.innerText;
    const shadowRoot = this.shadowRoot;
    const tabBodies = this.querySelectorAll(".tab-body");
    const items = shadowRoot.querySelectorAll(".tab-head .item");

    tabBodies.forEach(content => (content.slot === tabName) ? content.style.display = "block" : content.style.display = "none")
    items.forEach(item => (item.innerText === tabName) ? item.classList.add('active') : item.classList.remove('active'))
  }

}

window.customElements.define('my-tab', MyTab);

在 show-wc.html 中引用

// show-wc.html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>显示自订的 WC 元件</title>
  <style>
    body {
      display: flex;
      gap: 40px;
      margin: 50px;
      flex-wrap: wrap;
      background-color: #ebf5fc;
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    /* 利用 part 属性 , 可以穿过 shadow-dom 做设定 */
    my-tab::part(tab-head) {
      color: rgba(254, 8, 8, 0.93);
      font-weight: 900;
    }

    my-tab::part(tab-head):hover {
      transform: skewX(-20deg) translateX(8px);
    }
  </style>

</head>
<body>

<my-tab class="bg-light-green">
  <div class="item">London</div>
  <div class="item">Paris</div>
  <div class="item">Tokyo</div>

  <div slot="London" class="tab-body" id="tabs">
    <h2>London</h2>
    <p>London is the capital of England.</p>
  </div>
  <div slot="Paris" class="tab-body" style="display:none">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
  </div>
  <div slot="Tokyo" class="tab-body" style="display:none">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</my-tab>

<div class="thin">
  <my-tab>
    <div class="item">London</div>
    <div class="item">Paris</div>
    <div class="item">Tokyo</div>

    <div slot="London" class="tab-body" id="tabs">
      <h2>London</h2>
      <p>London is the capital of England.</p>
    </div>
    <div slot="Paris" class="tab-body" style="display:none">
      <h2>Paris</h2>
      <p>Paris is the capital of France.</p>
    </div>
    <div slot="Tokyo" class="tab-body" style="display:none">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
    </div>
  </my-tab>
</div>


<script src="./tab.js"></script>
</body>
</html>

完成 !!

成果

如果想直接体验成果 , 请到 web-component-pseudo-classes.html 查看

参考资料 :

• Udemy 课程 - Web Components & Stencil.js - Build Custom HTML Elements
• MDN 文件 - :host
• W3C 文件 - CSS Scoping Module Level 1