我最近决定使用ShadowDOM在我的项目中封装样式。一开始我以为它可以按预期工作，但是我注意到来自外部CSS文件的一些图标已经消失了。
我已经准备了代码来演示这个问题（请看下面的代码片段。）>
您可以看到，包含带有图标的外部CSS文件的HTML在ShadowDOM外部可以正常工作。我也想在shadowDOM中使用它。
我该如何实现？
const body = document.getElementsByTagName('body')[0]; const wrapper = document.querySelector('.wrapper') const handleAddToShadowClick = (param) => { const host = document.querySelector('#shadowHost'); if(param === 'insideShadow') { const shadowRoot = host.attachShadow({mode: 'open'}); shadowRoot.innerHTML = firstComponent } else { const shadowRoot = host; wrapper !== null ? body.removeChild(wrapper): '' shadowRoot.innerHTML = firstComponent } } const firstComponent = ` <div class="wrapper"> <div class="icon login">Bla bla</div> <div style="font-family: testFont;">Sample String od text</div> <link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous"> </div> `.wrapper { font-family: agGridBalham; background-color: aquamarine; color: black; } .balham:before { content: "\F11F"; } .login::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> Refresh the page after each button click </p> <button onclick="handleAddToShadowClick('outside')">Add outside shadow</button> <button onclick="handleAddToShadowClick('insideShadow')">Add inside shadow</button> <div> <div id="shadowHost"> </div> </div> <script src="./script.js"></script> </body> </html>
我最近决定使用ShadowDOM在我的项目中封装样式。一开始我以为它能按预期工作，但我注意到某些图标来自...
在您的情况下，不会执行链接标记，并且不会发送任何网络调用来获取文件（您可以使用开发工具网络标记来验证它），并且它与Shadow DOM无关，当前您正在尝试插入链接在innerHTML中标记为字符串。在这种情况下，不会解释字符串，也不会执行链接。