如何在Web Components中引入外部CSS样式?
目录
文章目录隐藏
我们在做前端开发时,还是会遇到需要引入外部 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);
优点:此方法兼容性非常好。
缺点:性能
二、::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` 部分 */ }
优点:简洁明了
缺点:兼容性不太好。
三、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 本身就是异步过程。
缺点:兼容性不佳。
结语
以上就是码云笔记分享的关于前端开发中如何在 Web Components 中引入外部 CSS 样式的 8 种方法,各种方法适用场景各不相同,所以大家小心食用,感谢阅读。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何在Web Components中引入外部CSS样式?
码云笔记 » 如何在Web Components中引入外部CSS样式?