动态加载耦合的HTML/CSS文件到DOM

Dynamically loading coupled HTML/CSS files into the DOM

本文关键字：CSS 文件 DOM HTML 加载 耦合 动态      更新时间：2023-09-26

对于我的项目，我使用require.js作为依赖管理器每个组件通过requires文本插件加载它自己的html，并将自己附加到DOM中的正确位置。

最后发生的一件事是有许多样式标签与html内嵌。例如:

<div id="menuComponent">
     .....
</div>
<style>
     #menuComponent {
          .... 
     }
     ....
<style>

这导致css现在不再是外部样式表的一部分，并且在脚本编译时与html中的每个相应组件内联。

  1. 这被认为是坏的做法，有许多<style>标签内联的代码?

  2. 如果是这样，我应该如何将样式表移动到一个集中的位置?

在body中包含<style>仅当scoped属性存在时才有效。

来自HTML5规范:

作用域属性是一个布尔属性。如果设置了，则表示这些样式只针对样式元素的父元素的子树，而不是针对整个Document。

在你的情况下，我建议看一下require-css: https://github.com/guybedford/require-css

如果需要的话，它允许你在一个单独的文件中包含CSS。

来自require-css文档:

要将CSS输出到一个单独的文件，使用配置:

{
  separateCSS: true,
  modules: [
  {
    name: 'mymodule'
  }
  ]
}
相关文章：