如何在Web Components中引入外部CSS样式?

目录
文章目录隐藏
  1. 一、@import
  2. 二、::part
  3. 三、var
  4. 四、通过属性传入
  5. 五、自定义组件内部定义修改样式函数
  6. 六、通过 slot 外部设置样式
  7. 七、fetch 获取
  8. 八、CSS module import

我们在做前端开发时,还是会遇到需要引入外部 CSS 到 Shadow DOM 情况,那么如何处理呢?本文就就最近遇到的情况给出如下几种方案,希望对大家有用。

一、@import

示例代码:

const template = document.createElement('template');

class WhatsUp extends HTMLElement {
  connectedCallback() {
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innderHTML = `
      <style>
          @import "./index.css"; // 核心代码
      </style>
      <div>Sup</div>
    `
  }
}

window.customElements.define('whats-up', WhatsUp);

优点:此方法兼容性非常好。

@import 浏览器兼容性

缺点:性能

二、::part

::part CSS 伪元素表示在阴影树中任何匹配 part 属性的元素。

示例代码

HTML 代码:

<template id="whats-up">
    <div part="sup">Sup</div>
    <div part="foo">Sup</div>
</template>

<whats-up></whats-up>

CSS 代码:

whats-up::part(sup) {
  /* 样式作用于 `sup` 部分 */
}
whats-up::part(foo) {
  /* 样式作用于 `foo` 部分 */
}

优点:简洁明了

缺点:兼容性不太好。

::part 浏览器兼容性

三、var

CSS 自定义属性可以穿透到 Shadow DOM 中!

示例代码

JS 代码:

const template = document.createElement('template');
template.innerHTML = `
<style>
button {
  background: var(--background);
  color: var(--color);
  padding: var(--padding);
  font-size: var(--font-size);
  border: 0;
}
</style>
<div>Sup</div>`;

CSS 代码:

whats-up {
  --background: #1E88E5;
  --color: white;
  --padding: 2rem 4rem;
  --font-size: 1.5rem;
}

优点:兼容性好。

缺点:比较局限,只能外部定几个,样式不能“自由飞翔”。

四、通过属性传入

示例代码

JS 代码:

class Whatsup extends HTMLElement {
  static get observedAttributes() {return ['css']}

  constructor() {
    super();
  }

  get css() {
    return this.getAttribute('css');
  }

  set css(value) {
    if (value === null || value === false) {
      this.removeAttribute('css');
    } else {
      this.setAttribute('css', value);
    }
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({
      mode: 'open'
    });
    shadowRoot.innerHTML = `
    <style>
      :host{
        display: flex;
      }
      ${this.css} // 核心代码
      </style>
     <div class="name">Sup</div>
      `;
  }
}

HTML 代码:

<whats-up
  css="
    .name{
      color: red;
    }
  "
></whats-up>

优点:样式可以随意修改。

缺点:代码不够优雅。

五、自定义组件内部定义修改样式函数

示例代码

JS 代码:

class Whatsup extends HTMLElement {
  // ...

  // 核心代码
  reStyle(els, styles) {
    const elements = Array.isArray(els) ? els : [els];
    elements.forEach((element) => Object.assign(element.style, styles));
  }
}

HTML 代码:

<whats-up></whats-up>

<script>
    const myEle = document.querySelector('whats-up')
    const title = myEle.shadowRoot.querySelector('.title');

    myEle.reStyle(title, {
        color: 'red',
        width: '200px',
    })
</script>

六、通过 slot 外部设置样式

示例代码

JS 代码:

class WhatsUp extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
    <div>
      <slot name="header"></slot>
    </div>
    `;
  }
}
customElements.define('whats-up', WhatsUp);

HTML 代码:

<style>
  .header{
    color: red;
  }
</style>

<whats-up>
  <div slot="header" class="header">
    what's up
  </div>
</whats-up>

七、fetch 获取

示例代码:

class WhatsUp extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    // 获取样式
    fetch('./index.css').then(res => res.text()).then(data => {
        let node = document.createElement('style');
        node.innerHTML = data;
        this.shadowRoot.appendChild(node);
    });
    // ...
  }
}
customElements.define('whats-up', WhatsUp);

优点:优点是兼容性不错,支持 Shadow DOM 的元素均支持此语法;以及性能还 OK。

缺点:不优雅。

八、CSS module import

此方法使用浏览器原生的 import 语法,但是 import 的是 CSS 文件而不是 JS 文件。

也就是把 CSS 文件直接作为模块引入。

示例代码:

import styles from "index.css";

class WhatsUp extends HTMLElement {
  constructor() {
    // ...
    // 核心代码
    shadow.adoptedStyleSheets = [styles];
  }
}

优点:优点是使用方便快捷且是官方推荐方法,或者是 import CSS 模块就是为了这个场景才支持的;以及性能 OK,import 本身就是异步过程。

缺点:兼容性不佳。

import 语法浏览器兼容性

结语

以上就是码云笔记分享的关于前端开发中如何在 Web Components 中引入外部 CSS 样式的 8 种方法,各种方法适用场景各不相同,所以大家小心食用,感谢阅读。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何在Web Components中引入外部CSS样式?

发表回复