有条件地呈现Web组件和样式表链接
因此，我现在正在开发一个微前端架构POC，使用Web组件来包装来自任何其他框架的代码。目标是让UI的各个部分可以单独部署到不同的主机上，并简单地拉入“父”应用程序(即用户导航到的应用程序)中。
我已经完成了大部分架构的工作，但现在我正在尝试将Shadow DOM集成到我的工作中。我当前的设计是通过全局静态链接/脚本标记加载JS和CSS，如下所示。没有阴影DOM，这是完美的工作。
<html>
<head>
<link rel="stylesheet" href="http://micro-fe.com/file.css" />
</head>
<body>
<web-component></web-component>
<script src="http://micro-fe.com/file.js"></script>
</body>
</html>但是，一旦我使用Shadow DOM将内容挂载到Web组件中，它就崩溃了。我在页眉中加载的样式表不再能够触及Web组件中的内容。这是我使用Shadow DOM的最终目标，但这意味着我需要一种不同的方式来加载我的CSS。目标是像现在一样从外部样式表加载它，而不是将它内联到标记中。如下所示：
// Code is inside Web Component. "this" is HTMLElement
const shadowRoot = this.attachShadow({ mode: 'open' });
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'http://micro-fe.com/file.css';
shadowRoot.appendChild(link);我还没有测试过这一点，但我读到过标签应该在Shadow DOM中工作。从理论上讲，这将使我在Web组件中获得作用域样式。
我的最后一个挑战，也是我发布这个问题的原因，与条件渲染有关。我的不会总是出现在页面上。围绕它的其他逻辑将决定我何时希望呈现该内容。因此，我担心的是，我不希望每次呈现组件时都必须重新加载CSS文件。
我正在考虑将浏览器缓存作为一种可能的解决方案，但总的来说，我想知道是否有什么可以提供的技巧。我知道这有点复杂和非标准，但我的最终目标是解决所有这些问题，并发布一个开箱即用的库，使其他人更容易。
回答 1
Stack Overflow用户
发布于 2019-11-27 00:55:50
我还没有测试过，但我读到过标签应该在影子DOM中工作。从理论上讲，这将使我在Web组件中获得作用域样式。
是的，你可以在暗影王国中使用<link>。
所以我担心的是，我不希望每次呈现组件时都必须重新加载
文件。我正在考虑将浏览器缓存作为一种可能的解决方案，但总的来说，我想知道是否有什么可以提供的技巧。
是的，多亏了浏览器缓存，CSS文件只在第一次需要时才会被下载。
https://stackoverflow.com/questions/59052854
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号