如何在Svelte中将样式应用于slot元素？

Question

我希望在一个模块中声明的样式应用于该模块的slot元素（在另一个文件中填充）。

以下是Svelte REPL以下示例：

App.html

<List>
    {{#each items as item}}
        <li><a>{{item}}</a></li>
    {{/each}}
</List>

<script>
    import List from './List.html'

    export default {
        components: {
            List
        }
    }
</script>

List.html：

<h1>A Special List</h1>
<ul>
    <li><a>Let's all be red!</a></li>
    <slot></slot>
</ul>

<style>
    ul a {
        color: red;
    }
</style>

数据：

{
    "items": ["Nope", "I'm good"]
}

红色着色不适用于通过插槽添加的a标记元素。

我对Svelte很新，但我在网上找到了尽可能多的内容，似乎无法找到解决方案。任何帮助将不胜感激，谢谢。

Answer 1

这里的诀窍是使用:global(...)修饰符选择加入级联。在您的列表组件中：

<style>
  ul :global(a) {
    color: red;
  }
</style>

这意味着，作为此组件的a元素的子元素的任何ul元素，无论它们是否属于此组件，都应为红色＆＃39;。< / p>

Answer 2

我想使用计算出的css属性，例如与：nth-​​child或：nth-​​last-child一起使用，例如 Css tricks usefull :nth-child recipes，

找到了一种解决方案，将css添加到文档头中（带有标准的svelte标签，没有外部库。

想法是在脚本中创建CSS，然后使用

将其添加到文档head中

像这样：

<script>
 export let specialChild = ''; 
 let uniqueId = "SomeList-sp:" + specialChild ;
 let stylesInHead = '<style> [data-i="' + uniqueId + '"] :nth-child(' + specialChild + ') {color: red; } </style>' 
</script>

<svelte:head>
{@html stylesInHead}
</svelte:head>

完整的REPL示例： RPEL example CSS in head per component

请发表评论，如果这是一个可行的解决方案，或者更好地使用诸如情感之类的外部库...