Web Components中引入外部CSS的8种方法

更新日期: 2021-11-06阅读: 1.3k标签: Component

开发中,还是会遇到需要引入外部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);

优点:此方法兼容性非常好,点击查看caniuse
缺点:性能

二、::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` 部分 */
}

优点:简洁明了
缺点:兼容性不太好,点击查看caniuse

三、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>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本身就是异步过程。
缺点:兼容性不佳,狠狠戳这里caniuse

总结

各种方法适用场景各不相同,小心食用。

链接: https://www.fly63.com/article/detial/10779

javascript字符串进行编码的方法:escape编码、encodeURI编码、encodeURIComponent编码

js对字符串进行编码的方法。ECMAScript v3 反对使用escape方法,用 encodeURI() 和 encodeURIComponent() 替代它。encodeURI对URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的。

使用纯粹的JS构建 Web Component

Web Component 出现有一阵子了。 Google 费了很大力气去推动它更广泛的应用,但是除 Opera 和 Chrome 以外的多数主流浏览器对它的支持仍然不够理想。Web Component 是一系列 web 平台的 API,它们可以允许你创建全新可定制、可重用并且封装的 HTML 标签,从而在普通网页及 web 应用中使用。

ReactJS Components: 基础指南

创建和管理React组件的各种方式,涌现的大量状态管理工具等等都是这些挑战的焦点。我们今天能做的就是在React(基于社区选择)中将最常用的做法引入桌面并讨论它们。

从VantComponent 谈小程序维护

在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架

react如何通过shouldComponentUpdate来减少重复渲染

在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件都重写render,尽管绝大多数子组件的props没有变化

react中的element、component、instance的理解

在React中无论是class形式(render函数)还是function形式(return的内容)的组件,最后返回的jsx其实质是React.createElement函数的结果,而React.createElement函数返回的结果是一个对象树,我们可以称之为元素描述树

React中PureComponent 和 Component区别

我们来看一看 Component 和 PureComponent 的区别,我们先从问题出发,通过解决实际的问题来查询出 PureComponent 和 Component 之间区别。这里创建 Greeting 的组件,其中我们用 setInterval 每间隔 2 秒就更新状态title一次

如何评价 Vue 的 Function-based Component?

react 的不可变,纯函数。直接导致 hooks 必须使用 const 关键字,不能是 let,这也是 hooks 的奇迹之一;Hooks对Fiber更好 -> Hooks是Fiber的产物 -> 没有Fiber就不是Hooks

React Server Component 可能并没有那么香

前段时间 React 团队发布了一项用于解决 React 页面在多接口请求下的性能问题的解决方案 React Server Components。当然该方案目前还在草案阶段,官方也只是发了视频和一个示例 demo 来说明这个草案。

Vue.js 中使用defineAsyncComponent 延迟加载组件

使用 Vue 3 的 defineAsyncComponent 特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。这是改善初始页面加载的好方法,因为我们的应用程序将以较小的块加载,而不必在页面加载时加载每个组件。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!