一组志愿者使用Stenciljs创建了一个单个/多选择的Web组件： https：//github.com /notherag/adg-components
对于此Web组件，不启用Shadow dom，以便开发人员可以覆盖/自定义样式。
现在，我们想将其交给客户，以便他们可以在项目中使用它。他们这样做是这样的：
<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自动连接到＆lt; head＆gt; 的最底部，在其他任何样式之后：
这很难覆盖特定的样式。有没有办法防止这种情况？例如，在我们的情况下，在＆lt; script type =“ module” src =“/build/adg-components.esm.js”＆gt;＆gt;/script＆gt之后会立即添加样式更有意义。 ; ，因此以下任何以下＆lt; style＆gt; 都将优先。
我能想到的另一个解决方法是，运行 $ npm run build 时，完全删除样式，然后让客户手动导入样式。但这感觉不是正确的方法。
任何帮助将受到高度赞赏。谢谢。
A group of volunteers has created a single/multi-select web component using StencilJS: https://github.com/NothingAG/adg-components
For this web component, Shadow DOM is not enabled so that developers can override/customise styles.
Now we want to hand it over to the client so they can use it in their project. They do it like this:
<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>
What they experience though is that because the Shadow DOM is not enabled, the CSS is auto-attached to the very bottom of <head>, after any other styles:
This makes is very hard to override specific styles. Is there a way to prevent that? For example, it would make much more sense in our case that the styles are added right after <script type="module" src="/build/adg-components.esm.js"></script>, so any following <style> would take precedence.
One other workaround I can think of is to remove the styles altogether when running $ npm run build, and then let the client import the styles manually. But this doesn't feel like the right way to do it.
Any help is highly appreciated. Thank you.
发布评论
评论（1）
当关闭阴影DOM时，模板将CSS附加到
head元素，第一个链接>链接元素。这是执行此操作的相关代码行：
，
因此您需要做的一切至少是一个
link> link> link> link> link> link> link> link> link> link> link>>并且CSS将以正确的文档顺序插入，以便您可以覆盖样式。When the Shadow DOM is turned off, Stencil attaches the CSS to the
headelement, before the firstlinkelement.Here is the relevant line of code that does this:
https://github.com/ionic-team/stencil/blob/0cd139b6a0e17c6b0916d8b0fb3e943a523f4a2f/src/runtime/styles.ts#L79
So all you need to do is have at least one
linkelement in theheadand the CSS will be inserted in the correct document order so that you can override the styles.