Почему изменение :: content на :: slotted (..) не работает? - PullRequest
Новая
       5

Почему изменение :: content на :: slotted (..) не работает?

0 голосов
/ 22 ноября 2018

Окружающая среда: Полимер 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">

Стиль не работает после этого изменения.

Может кто-нибудь дать мне объяснение, почему, пожалуйста?Я понятия не имею.

1 Ответ

0 голосов
/ 22 ноября 2018

Вот рабочий пример, который может помочь:

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);
...