Как правильно взаимодействовать с внутренними компонентами в shadowDom, используя lit-element? - PullRequest
Новая
       14

Как правильно взаимодействовать с внутренними компонентами в shadowDom, используя lit-element?

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

Я пытаюсь использовать бумажный диалог в моем пользовательском компоненте.

Я хочу иметь возможность открывать диалоговое окно снаружи компонента. Каков наилучший способ сделать это? (все примеры работают непосредственно над компонентом)

Также диалоговое окно требует от меня вызова open () для его открытия.

В найденных примерах я нашел: 

this.$.dialog.open();

Но, похоже, это не работает с lit-element

Я заставил его работать с помощью shadowRoot, но не уверен, что это лучший вариант: 

render() {
        return html`
        <style>
        </style>
         <paper-dialog id="dialog">
         <h2>Content</h2>
       </paper-dialog>
      `;
      }

      firstUpdated(changedProperties) {
        console.log("firstUpdated called")
        if (this.shown == "true")
        {
           // this.$.dialog.open();
           this.shadowRoot.getElementById("dialog").open()
        }
      }

Я добавил свойство к своему элементу под названием "показанный" 

static get properties() {
    return {
      shown: Boolean,

Думая, что я мог бы передать это извне в свой компонент, но он, похоже, тоже не сработал (я могу установить его один раз с подходящим пользовательским элементом, но изменения в нем со стороны не работают.

1 Ответ

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

Как правило, если вы агрегируете диалог в элементе, который имеет другие элементы пользовательского интерфейса, вы не должны показывать / скрывать диалог снаружи элемента - событие, которое запускает диалог, должно вызываться и обрабатываться с помощью содержащего элемента .

Тем не менее, если это абсолютно необходимо, тогда я предпочитаю метод "showDialog" (не свойство). Закрытие диалога должно вызываться кнопкой диалога или потерей фокуса, поэтому вам не нужно выставлять метод закрытия.

...