what is the proper way to interact with inner components within the shadowDom using lit-element?

Question

I am trying to use paper-dialog within my custom component.

I want to be able to open the dialog from outside the component. What is the best way to do this? (all the examples work directly on the component)

Also the dialog requires me to call "open()" on it to open it.

In the examples I found I found:

this.$.dialog.open();

But this doesn't seem to work with lit-element

I got it to work using shadowRoot, not sure this is the best option:

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()
        }
      }

I added a property to my element called "shown"

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

Thinking I could pass this from the outside into my component, but it doesnt seem to do the trick either (I can set it once with the custom element propery, but changes to it from the out side dont seem to work.

Answer 1

Generally, if you are aggregating a dialog within an element that has other UI elements then you shouldn't be showing/hiding the dialog from outside the element - the event that triggers the dialog should be raised and handled with the containing element.

That said, if it's absolutely necessary, then I prefer a "showDialog" method (not a property). Closing the dialog should be triggered by a dialog button or loss of focus, so you don't need to expose a close method.