Javascript 阴影dom中的svg
我试图在web组件中使用字体AWJS/svg库，但图标不会显示。这可能吗 我正在尝试在现有webforms项目中实现一个角度组件，而不需要css和脚本“出血”，还有其他建议吗？iframe不是一个选项Javascript 阴影dom中的svg,javascript,angular,webforms,font-awesome,web-component,Javascript,Angular,Webforms,Font Awesome,Web Component,我试图在web组件中使用字体AWJS/svg库，但图标不会显示。这可能吗 我正在尝试在现有webforms项目中实现一个角度组件，而不需要css和脚本“出血”，还有其他建议吗？iframe不是一个选项 <html> <head> <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<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>
customElements.define（'my-holder'，类扩展HtmleElement{
构造函数（）{
超级（）；
console.log（“构造函数”）；
让shadowRoot=this.attachShadow({
模式：“打开”
});
const t=document.querySelector（“#holder”）；
const instance=t.content.cloneNode（true）；
appendChild（实例）；
}
connectedCallback（）{
console.log（“回调”）；
}
});
轻dom
暗影dom
文档。所以他们不能对
shadowDOM字体（脚本和样式）必须加载到主DOM中 如果您不想在shadowDOM之外对样式进行出血，则必须遵守以下规则：
- 字体图标定义必须保留在主DOM中
- lightDOM是shadowDOM内容的（主DOM）“原始”DOM
- lightDOM由主DOM设置样式
（或其shadowDOM容器，如果元素本身位于另一个shadowDOM中） - 开槽光域保留在光域中，仅反映到其
- 您不想在每个lightDOM中重复图标定义
（那么您最好不要使用自定义元素）
- 自定义元素可以访问整个DOM
- 创造自己的光明
- 是开槽的（反射！未移动！）
- 从属性获取配置
自定义元素。定义（'awesome-icon'，类扩展HtmleElement{
构造函数（）{
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'）；
//将图标HTML移回lightDOM，以便Fontsome可以为其设置样式
this.innerHTML=this.shadowRoot.querySelector（“#ICON”）.innerHTML；
}
});
：：开槽（*）{
/*lightDOM SPAN具有更高的特异性，唯一的出路是使用！重要*/
背景：var（--fa背景，灰色）！重要；
颜色：var（--fa颜色，暗灰色）！重要；
}
跨度{
背景：lightblue；/*！important inside shadowDOM将否决这些设置*/
颜色：红色；
}
许多旧的skool库使用文档。
访问主DOM。
所以他们不能对shadowDOM
这意味着你不让脚本流血的目标是不可能的。
字体（脚本和样式）必须加载到主DOM中
如果您不想在shadowDOM之外对样式进行出血，则必须遵守以下规则：
- 字体图标定义必须保留在主DOM中
- lightDOM是shadowDOM内容的（主DOM）“原始”DOM
- lightDOM由主DOM设置样式
（或其shadowDOM容器，如果元素本身位于另一个shadowDOM中）
- 开槽光域保留在光域中，仅反映到其
- 您不想在每个lightDOM中重复图标定义
（那么您最好不要使用自定义元素）
- 自定义元素可以访问整个DOM
解决方案：
编写一个自定义元素
- 创造自己的光明
- 是开槽的（反射！未移动！）
- 从属性获取配置
自定义元素。定义（'awesome-icon'，类扩展HtmleElement{
构造函数（）{
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'）；
//将图标HTML移回lightDOM，以便Fontsome可以为其设置样式
this.innerHTML=this.shadowRoot.querySelector（“#ICON”）.innerHTML；
}
});
：：开槽（*）{
/*lightDOM SPAN具有更高的特异性，唯一的出路是使用！重要*/
背景：var（--fa背景，灰色）！重要；
有限公司
<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>
<awesome-icon background="lightcoral" color="red"></awesome-icon>
<awesome-icon background="lightgreen" color="green"></awesome-icon>
<awesome-icon></awesome-icon>