Question

环境：聚合物3

问题： 我已经将:: content更改为:: slotted，但是样式不起作用：

更改前

   .ContentWrapper,
      .ScrollAndHeaderContainer,
      :host ::content .my-data-grid--BaseHTMLWrapper {
        flex: 1 1 auto;
        display: flex;
        flex-flow: column nowrap;
        min-height: 0;
      }

更改后

 .ContentWrapper,
      .ScrollAndHeaderContainer,
      :host ::slotted(.my-data-grid--BaseHTMLWrapper) {
        flex: 1 1 auto;
        display: flex;
        flex-flow: column nowrap;
        min-height: 0;
      }

这是我的用法：

<div class="my-data-grid--BaseHTMLWrapper">

此更改后样式无效。

有人可以给我解释为什么要吗？我完全不知道。

Answer 1

这是一个可能有用的示例：

DEMO

index.hml：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module" src="custom-element.js"></script>
  </head>
  <body>  

    <custom-element>
        <div slot = "test" class="my-data-grid--BaseHTMLWrapper" >SLOT TEST </div>
    </custom-element>

  </body>
</html>

custom-element.js：

import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.13/polymer-element.js';
class CustomElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        div ::slotted(.my-data-grid--BaseHTMLWrapper) {
          flex: 1 1 auto;
          display: flex;
          flex-flow: column nowrap;
          min-height: 0;

          font-family: sans-serif;
          color:red;

        }
      </style>
      <div><slot name='test'></slot></div>
    `;
  }
}
customElements.define('custom-element', CustomElement);

为什么将:: content更改为:: slotted（..）无效？

1 个答案: