доступ к теневым домам - PullRequest
Новая
       8

доступ к теневым домам

0 голосов
/ 25 июня 2018

так вот мой код скрипта 

class Pop extends HTMLElement {
  constructor() {
    super();
  }
 connectedCallback() {
 let currDoc = document.currentScript.ownerDocument;
  let template = currDoc.querySelector('#pop-up');
  let tmplNode = document.importNode(template.content, true);

  let shadowRoot = this.createShadowRoot();
  shadowRoot.appendChild(tmplNode);
  shadowRoot.querySelector("#content").innerHTML = this.innerHTML;
 }
}
 window.customElements.define("pop-up", Pop);

, а вот мой шаблон 

<template id="pop-up">
    <style>
     * {
     padding: 0;
      margin: 0;
    }

.btn {
  //styling
}

.btn:hover {
  //styling
}

#box{
    //styling
    display: none;
}

#box h1{
    //styling
}

 </style>

<div id="box">
    <h1> Your Shopping Cart</h1>
    <text id="content"> </text>

    <button class="btn" onclick="close()"> Close </button>
</div>
</template>

и в моем индексном файле у меня есть 

<button class="btn" onclick="pop()">Show Pop</button>
<pop-up id="pop"> pop-up box</pop-up>

<script>
    function pop(){
        document.getElementById("pop").style.display = "block";
    }
</script>

Iпытаюсь сделать всплывающее окно.И когда я нажимаю на кнопку «Показать поп», я хочу изменить свойство отображения со стиля на «блок» с «нет».Но по какой-то причине это не работает.Я новичок в этой тени, и я не могу понять это.

1 Ответ

0 голосов
/ 25 июня 2018

Сложно объяснить все в этом ответе, но следующий код даст вам представление о том, как может выглядеть решение.

MDN, как обычно, имеет идеальное введение для веб-компонентов и теневых доменов здесь 

 class Pop extends HTMLElement {
      constructor() {

        // Always call super first in constructor
        super();
        let template = document.getElementById('pop-up');
        let templateContent = template.content;

        // Create a shadow root
        const shadowRoot = this.attachShadow({ mode: 'open' })
          .appendChild(templateContent.cloneNode(true));
         
        // attach close listener
        this.shadowRoot.querySelector('.btn').addEventListener('click', this.close.bind(this));
      }
     
      //  close pop-up
      close() {
        this.style.display = 'none';
      }

      //  open pop-up
      open() {
        this.style.display = 'block';
      }
    }
    window.customElements.define("pop-up", Pop);
    
     function pop() {
      // notice we are using the open method here 
      document.getElementById("pop").open();
    }
  <template id="pop-up">
    <style>
      :host {
        display: none;
      }

      * {
        padding: 0;
        margin: 0;
      }

      .btn {
        //styling
      }

      .btn:hover {
        //styling
      }

      #box {
        //styling
        display: none;
      }

      #box h1 {
        //styling
      }
    </style>

    <div id="box">
      <h1> Your Shopping Cart</h1>
      <!-- Notice we are using slots -->
      <slot> </slot>

      <button class="btn"> Close </button>
    </div>
  </template>
  
   <button class="btn" onclick="pop()">Show Pop</button>
  <pop-up id="pop"> pop-up box </pop-up>
...