2

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.

Joelio
  • 4,621
  • 6
  • 44
  • 80

1 Answers1

0

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.

Paul
  • 178
  • 1
  • 8
  • The idea of my component is a self contained dialog that others could use, this dialog lets them choose a lat/long using several methods, and when it is done returns the value (in one of 3 formats), its seem presumptuous of me the component writer to tell the user how to open my dialog, I just want to give them a way to open the dialog and a way to give them back the result, not sure the best way to do this with lit-element. – Joelio Nov 10 '18 at 13:49
  • How would I expose a showDialog method to others when packaged as a component? – Joelio Nov 10 '18 at 13:51
  • Ok, I think I understand your idea, I found another example, just give my element and html id, then add a "showDialog" method to my element, and call it from js on the html page,is this what you meant? – Joelio Nov 10 '18 at 15:53