[Webcomponents]WebComponents中引入外部CSS的8种方式

时间：2023-03-27 11:40:16 JavaScript

在开发过程中，还是会出现需要在ShadowDOM中引入外部CSS的情况，那么如何处理呢？针对最近遇到的情况，笔者给出如下解决方案。1.@import示例代码consttemplate=document.createElement('template');classWhatsUpextendsHTMLElement{connectedCallback(){constshadowRoot=this.attachShadow({mode:'open'});shadowRoot.innderHTML=`

Sup

`}}window.customElements.define('whats-up',WhatsUp);优点：此方法兼容性很好，点击查看caniuse。缺点：性能2.::part::partCSS伪元素表示影子树中与part属性相匹配的任何元素。示例代码HTMLSup

Sup

CSSwhats-up::part(sup){/*样式适用于`sup`部分*/}whats-up::part(foo){/*样式适用于`foo`部分*/}简洁明了缺点：兼容性不是很好，点击查看caniuse。3.varCSS自定义属性可以渗透到ShadowDOM中！示例代码JSconsttemplate=document.createElement('template');template.innerHTML=`

Sup

`;CSSwhats-up{--background:#1E88E5;-白颜色;--填充：2rem4rem；--font-size:1.5rem;}优点：兼容性好缺点：比较受限，只能对外设置少数，样式不能“自由飞翔”4.通过属性传递示例代码JSclassWhatsupextendsHTMLElement{staticgetobservedAttributes(){return['css']}constructor(){super();}getcss(){returnthis.getAttribute('css');}setcss(value){if(value===null||value===false){this.removeAttribute('css');}else{this.setAttribute('css',value);}}connectedCallback(){constshadowRoot=this.attachShadow({mode:'open'});阴影根。innerHTML=`Sup

`;}}HTML优点：样式可以随意修改缺点：代码不够优雅5.自定义组件内部定义修改样式函数示例代码JSclassWhatsupextendsHTMLElement{//...//核心代码reStyle(els,styles){constelements=Array.isArray(els)?埃尔斯：[埃尔斯]；elements.forEach((element)=>Object.assign(element.style,styles));}}HTML6.通过slot外部设置样式示例代码JSclassWhatsUpextendsHTMLElement{constructor(){super();constshadowRoot=this.attachShadow({mode:'open'});shadowRoot.innerHTML=`

`;}}customElements.define('怎么了',WhatsUp);HTML

what'sup