В веб-компоненте JS6 как найти контекст трехмерного преобразования щелевого элемента? - PullRequest
Новая
       41

В веб-компоненте JS6 как найти контекст трехмерного преобразования щелевого элемента?

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

В новом веб-компоненте JS6 вы можете использовать <slot>, чтобы включить элемент light dom в shaodow dom, не теряя своих родительских и дочерних отношений в light dom. Если элемент помещается в оболочку внутри тени Root, например, так: 

<Custom-Element>
    <shadowRoot>
       <div id="some-inner-wrapper">
           <slot name="some-slot"></slot>
       </div>
    </shadowRoot>

    <span slot="some-slot">Who is my context?</span>
</Custom-Element>

И теперь я бы хотел установить transform-style: preserve-3d для родителя <span slot="some-slot">, если это свойство go <Custom-Element> (его непосредственный родитель) или <div id="some-inner-wrapper">? И почему так?

1 Ответ

0 голосов
/ 16 февраля 2020

Значение preserve-3d должно быть установлено для родительского элемента.

В вашем случае, я полагаю, вы хотите расположить элемент <span> с прорезями относительно <div id="inner-wrapper">, поэтому вам нужно применить preserve-3d к <div>.

См. пример ниже: 

btn.onclick = () => { 
customElements.define( 'custom-element', class extends HTMLElement {
  constructor() {
    super()
    this.attachShadow( {mode: 'open' } )
        .innerHTML = `
          <style>
            #some-inner-wrapper {
              display: inline-block ;
              padding: 10px ;
              background-color: rgb(255,0,0,0.5) ;
              transition: transform 1s ;
              transform-style: preserve-3d ; 
            }            
            #some-inner-wrapper:hover {
              transform: rotateY(55deg) ;           
            }
          </style>
          <div id="some-inner-wrapper">
             Horizontal <slot name="some-slot"></slot> Rotation
          </div>         
        `
  }
} ), btn.disabled=true
}
span {
    display: inline-block ;
    transition: transform 1s ;
    padding: 20px ;
    border: 1px solid black ;
    background-color: yellow ;
    cursor: pointer ;
}
              
span:hover {
    transform: rotateX(40deg) ;
}
<custom-element>
    <span slot="some-slot">Vertical Rotation</span>
</custom-element>

<div>
  <button id="btn">Upgrade</button>

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

Код выше был вдохновлен W3schools пример .

...