如何防止 CSS 自动附加到 head 元素的底部

Question

一群志愿者使用 StencilJS 创建了一个 single/multi-select 网络组件：https://github.com/NothingAG/adg-components

对于此 Web 组件，Shadow DOM 未启用，因此开发人员可以 override/customise 样式。

现在我们想把它交给客户，这样他们就可以在他们的项目中使用它。他们是这样做的：

<script type="module" src="/build/adg-components.esm.js"></script>
<script nomodule src="/build/adg-components.js"></script>

<adg-combobox
  id="hobbies"
  name="hobbies"
  label="Please select your hobbies"
  optionslabel="Hobbies"
  multi="true"
  lang="de"
></adg-combobox>

他们的经验是，由于阴影 DOM 未启用，CSS 会自动附加到 <head> 的最底部，在任何其他样式之后：

这使得覆盖特定样式变得非常困难。有没有办法防止这种情况发生？例如，在我们的例子中，在 <script type="module" src="/build/adg-components.esm.js"></script> 之后立即添加样式会更有意义，因此 <style> 之后的任何样式都将优先。

我能想到的另一种解决方法是在运行 $ npm run build 时完全删除样式，然后让客户端手动导入样式。但这似乎不是正确的做法。

非常感谢任何帮助。谢谢。

Answer 1

当阴影 DOM 关闭时，Stencil 将 CSS 附加到 head 元素，在第一个 link 元素之前 .

这是执行此操作的相关代码行： https://github.com/ionic-team/stencil/blob/0cd139b6a0e17c6b0916d8b0fb3e943a523f4a2f/src/runtime/styles.ts#L79

所以您需要做的就是在 head 中至少有一个 link 元素，然后 CSS 将以正确的文档顺序插入，这样您就可以覆盖样式。

如何防止 CSS 自动附加到 head 元素的底部

How to prevent CSS from being auto-appended to bottom of the head element

javascript

css

web-component

stenciljs

stencil-component