我正在尝试在 Web 组件中使用 font Awesome js/svg 库,但图标不会显示。这可能吗?
我正在尝试在现有的 webforms 项目中实现一个角度组件,而无需 css 和脚本“流血”,关于如何做到这一点还有其他建议吗? iframe 不是一个选项。
<html>
<head>
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer>
</script>
<script>
customElements.define('my-holder', class extends HTMLElement {
constructor() {
super();
console.log("constructor");
let shadowRoot = this.attachShadow({
mode: 'open'
});
const t = document.querySelector('#holder');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
connectedCallback() {
console.log("callback");
}
});
</script>
</head>
<body>
<div id="outside">
light dom
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
</div>
</div>
<template id="holder">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer></script>
dark shadow dom
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
</div>
</template>
<div id="inside">
<my-holder></my-holder>
</div>
</body>
</html>
许多 oldskool 库都使用document.
访问主 DOM。
因此他们无法对其中的内容执行任何操作shadowDOM
这意味着你的目标是不流血scripts出来是不可能的。
Font-Awesome(脚本和样式)必须加载到主 DOM 中。
如果您不想在 ShadowDOM 之外渗出样式,则必须遵守以下规则:
-
Font-Awesome 图标定义必须保留在主 DOM 中
-
lightDOM是(主 DOM)“原始”影子 DOM开槽内容
-
lightDOM 由主 DOM 设置样式
(或者它的shadowDOM容器,如果元素本身位于另一个shadowDOM中)
-
slotted lightDOM 保留在 lightDOM 中, 只是反映 to its <slot></slot>
-
您不想在每个 lightDOM 中重复 FontAwesome 图标定义
(你还不如not use那么就完全自定义元素了)
<span class="fa-4x fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
解决方案:
编写一个自定义元素
- 创建自己的 lightDOM
- 哪个是开槽的
<slot></slot>
(反映了!不感动!)
- 从属性获取配置
<awesome-icon background="lightcoral" color="red"></awesome-icon>
<awesome-icon background="lightgreen" color="green"></awesome-icon>
<awesome-icon></awesome-icon>
JSFiddle:https://jsfiddle.net/CustomElementsExamples/1pmvasnj/ https://jsfiddle.net/CustomElementsExamples/1pmvasnj/
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer></script>
<script>
customElements.define('awesome-icon', class extends HTMLElement {
constructor() {
super().attachShadow({mode: 'open'})
.append(document.getElementById(this.nodeName).content.cloneNode(true));
}
connectedCallback() {
let setProperty =
(prop, value)=>this.shadowRoot.host.style.setProperty('--' + prop, value);
setProperty('fa-background', this.getAttribute('background'));
setProperty('fa-color', this.getAttribute('color'));
// move icon HTML back to lightDOM so FontAwesome can style it
this.innerHTML = this.shadowRoot.querySelector('#ICON').innerHTML;
}
});
</script>
<template id="AWESOME-ICON">
<style>
::slotted(*) {
/* lightDOM SPAN has higher Specificity, only way out is using !important */
background: var(--fa-background,grey) !important;
color: var(--fa-color,darkgrey) !important;
}
</style>
<template id="ICON">
<span class="fa-4x fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
</template>
<slot><!--lightDOM REFLECTED here--></slot>
</template>
<awesome-icon><!-- lightDOM CREATED here --></awesome-icon>
<awesome-icon background="lightcoral" color="red"></awesome-icon>
<awesome-icon background="lightgreen" color="green"></awesome-icon>
<style>
span{
background:lightblue; /* !important inside shadowDOM overrules these settings */
color:red;
}
</style>
NOT使用 ShadowDOM 和 SLOT
并依赖作用域 CSS 属性,使代码更简单:
<script>
customElements.define('awesome-icon', class extends HTMLElement {
connectedCallback() {
this.append(document.getElementById(this.nodeName).content.cloneNode(true));
this.style.setProperty('--fa-background', this.getAttribute('background') );
this.style.setProperty('--fa-color' , this.getAttribute('color') );
}
});
</script>
<template id="AWESOME-ICON">
<span class="fa-4x fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
</template>
<awesome-icon background="lightcoral" color="red"></awesome-icon>
<awesome-icon background="lightgreen" color="green"></awesome-icon>
<awesome-icon></awesome-icon>
<style>
span {
background: var(--fa-background);
color: var(--fa-color );
}
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)