WebComponents CSS类无法在插槽

如何解决WebComponents CSS类无法在插槽

.testClass{
    color:red;
}

以及以下index.html文件：

<html>
  <head>
    <Meta charset="utf-8">
    <title>Portal Demo</title>
    <link rel="stylesheet" href="test.css">
    <script type="module" src="../build/portal-app.js"></script>
    <style>
      p {
        border: solid 1px blue;
        padding: 8px;
      }
    </style>
  </head>
  <body>
  <i class="fa fa-times"></i>
    <portal-app>
      <p>This is child cosntent</p>
    </portal-app>
  </body>
</html>

在portal-app内部，我有以下代码：

   import  'sdk-button'
@customElement('portal-app')
export class PortalApp extends LitElement {
    render() {
        return html`
      ${this.renderWidget()} 
    `;
    }

    renderWidget() {
        import("./views/my-test-element");
        return html`
<i class="fa fa-times"></i>
        <sdk-icon-button text="hello marc"><p slot="icon" class="testClass">hello</p></sdk-icon-button>
    `;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'portal-app': PortalApp;
    }
}

运行此命令时，.p标签的颜色不是red，并且看不到样式。但是我只向p添加了一个普通的html标签，颜色正确地变成了红色。

但是似乎在我的插槽中，我无法传递index.html中定义的css类，谁能告诉我为什么？

解决方法

根据Web Components Shadow DOM specifications，这是预期的行为。

在您的代码中

<p slot="icon" class="testClass">hello</p>

此模板是PortalApp Web组件的一部分。这意味着此标记位于Portal App Web组件的Shadow DOM中。在这种情况下，外部的CSS样式（index.html）均无法应用。反之亦然，即从组件到组件外部都不会发生CSS泄漏