Веб-компоненты: как получить доступ к элементу со слотом, используя shadowRoot.querySelector - PullRequest
Новая
       32

Веб-компоненты: как получить доступ к элементу со слотом, используя shadowRoot.querySelector

0 голосов
/ 24 февраля 2019

Привет, я новичок в концепции веб-компонентов.Я хотел знать, можем ли мы получить доступ к элементу с прорезями, используя shadowRoot.querySelector

Я реализовал поле ввода в качестве слота для динамической установки некоторых значений.И добавить к нему класс 'column-title'.Я пытаюсь получить доступ к этому элементу в connectedCallback () следующим образом

var titleInput = this.shadowRoot.querySelector('.column-title')

Но он возвращает ноль.

Пожалуйста, помогите.

1 Ответ

0 голосов
/ 24 февраля 2019

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

Консоль распечатает ссылки на слот.Если вы присоединяете класс просто для того, чтобы найти слот, то, вероятно, лучше установить идентификатор (при условии, что он находится в теневом корне) и найти его с помощью this.shadowRoot.getElementById('my-slot-id')

customElements.define('blue-box',
  class extends HTMLElement {
    constructor() {
      super();
      var template = document
        .getElementById('blue-box')
        .content;
      const shadowRoot = this.attachShadow({
          mode: 'open'
        })
        .appendChild(template.cloneNode(true));
    }
    
    connectedCallback() {
    	console.log(this.shadowRoot.querySelector('slot.target-slot'));
    }
  });
<template id="blue-box">
  <style>
  .blue-border {
    border: 2px solid blue;
    padding: 5px;
    margin: 5px;
  }
  </style>
  <div class='blue-border'>
    <slot name='interior' class='target-slot'>NEED INTERIOR</slot>
  </div>
</template>

<blue-box>
  <span slot='interior'>My interior text</span>
</blue-box>
<blue-box>
  <span slot='interior'>
  Check Here: <input type='checkbox'>
  </span>
</blue-box>
...