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

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

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

Также диалоговое окно требует от меня вызова «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,

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


lit-element polymer-3.x paper-dialog
person Joelio    schedule 09.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

person Paul    schedule 10.11.2018
comment
Идея моего компонента - это автономный диалог, который могут использовать другие, этот диалог позволяет им выбирать широту/долготу, используя несколько методов, и когда он будет готов, он возвращает значение (в одном из 3 форматов), это кажется мне самонадеянным. компонентный писатель, чтобы сообщить пользователю, как открыть мой диалог, я просто хочу дать им способ открыть диалог и способ вернуть им результат, но не уверен, что это лучший способ сделать это с помощью lit-element. - person Joelio; 10.11.2018
comment
Как я могу показать метод showDialog другим, если он упакован как компонент? - person Joelio; 10.11.2018
comment
Хорошо, я думаю, что понял вашу идею, я нашел другой пример, просто укажите свой элемент и идентификатор html, затем добавьте метод showDialog к моему элементу и вызовите его из js на странице html, это то, что вы имели в виду? - person Joelio; 10.11.2018