Стилизация слота по умолчанию в веб-компонентах - PullRequest
Новая
       61

Стилизация слота по умолчанию в веб-компонентах

0 голосов
/ 15 апреля 2020

В веб-компонентах у нас есть два типа слотов (именованные слоты и слоты по умолчанию). Мы можем легко стилизовать именованные слоты, используя синтаксис slot[name]::slotted(*). Но есть ли способ, которым мы можем стилизовать слоты по умолчанию, потому что с ними не связано имя?

Код выглядит примерно так, и я использую Angular Elements. 

<div class="topbar-item">
  <slot class="icon" name="icon"></slot>
  <span class="text">
   <slot></slot> <-- This is the slot i want to add styles, only if the slot has some data assigned. (need to add margin-left)
  </span>
</div>

Ответы [ 3 ]

0 голосов
/ 15 апреля 2020

Это неправильное представление в слотах содержимое MOVED до слотов в shadowDOM

Это НЕ! ;

Он остается невидимым в lightDOM и ОТРАЖЕН в свой СЛОТ в shadowDOM

Это означает, что вы можете применять стили после того, как содержимое было выделено (при наведении курсора в приведенном ниже коде)

Или .. для стилизации именованных слотов, вы стилизуете содержимое без имени в lightDOM: 

customElements.define("my-element", class extends HTMLElement {
  connectedCallback() {
    let template = document.getElementById(this.nodeName);
    this.attachShadow({
      mode: 'open'
    }).appendChild(template.content.cloneNode(true));
  }
})
my-element div {
  background: lightcoral;
  padding: 1em;
  margin-top:.5em;
}

my-element div:hover {
  background: lightgreen;
}

h1{
  background:lightblue;
  color:black;
  margin:0;
}
h1:hover {
  color: red;
}
<template id=MY-ELEMENT>
  <style>
    :host {
      display: block;
      padding:.5em;
      background:green;
    }
    ::slotted(*){
      color:white;
    }
    div{
      border:1px dashed black;
    }
  </style>
  <div>
  <slot name=title></slot>
  <slot></slot>
  </div>
</template>

<my-element>
  <div>Custom Elements Rule!</div>
  <h1 slot=title>Hello World!</h1>
  <div>What a wonderfull day!</div>
</my-element>

Замечание! как весь безымянный контент переходит в (один) безымянный слот

0 голосов
/ 30 апреля 2020

Вы можете просто использовать псевдокласс :not(): 

<style>
...

slot:not([name])::slotted(*) {
  ...
}

...
</style>
0 голосов
/ 15 апреля 2020

Нашел небольшой обходной путь, пока кто-нибудь не найдет лучший способ. Мы можем использовать событие slotchange , чтобы убедиться, что какие-либо предметы прикреплены к слоту или нет. Таким образом.

HTML

<slot (slotchange)="onSlotChanged($event)"></slot>

JS / TS 

    onSlotChanged($event) {
       const slotHasData = $event.target.assignedNodes().length > 0;
       // Is event.target.assignedNodes().length return more than 0, it has nu of items attached to the slot
    }
...