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

Question

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

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

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

В примерах, которые я нашел, я нашел:

this.$.dialog.open();

Но это не похоже на работу с лит-элементом

Я заставил его работать с помощью 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,

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

Answer 1

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

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