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









up vote
2
down vote

favorite












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.










share|improve this question

























    up vote
    2
    down vote

    favorite












    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.










    share|improve this question























      up vote
      2
      down vote

      favorite









      up vote
      2
      down vote

      favorite











      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.










      share|improve this 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.







      polymer-3.x lit-element paper-dialog






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 9 at 19:42









      Joelio

      2,19742760




      2,19742760






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          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.






          share|improve this answer




















          • 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 at 13:49










          • How would I expose a showDialog method to others when packaged as a component?
            – Joelio
            Nov 10 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 at 15:53










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













           

          draft saved


          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232318%2fwhat-is-the-proper-way-to-interact-with-inner-components-within-the-shadowdom-us%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote













          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.






          share|improve this answer




















          • 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 at 13:49










          • How would I expose a showDialog method to others when packaged as a component?
            – Joelio
            Nov 10 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 at 15:53














          up vote
          0
          down vote













          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.






          share|improve this answer




















          • 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 at 13:49










          • How would I expose a showDialog method to others when packaged as a component?
            – Joelio
            Nov 10 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 at 15:53












          up vote
          0
          down vote










          up vote
          0
          down vote









          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.






          share|improve this answer












          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 10 at 9:10









          Paul

          814




          814











          • 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 at 13:49










          • How would I expose a showDialog method to others when packaged as a component?
            – Joelio
            Nov 10 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 at 15:53
















          • 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 at 13:49










          • How would I expose a showDialog method to others when packaged as a component?
            – Joelio
            Nov 10 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 at 15:53















          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 at 13:49




          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 at 13:49












          How would I expose a showDialog method to others when packaged as a component?
          – Joelio
          Nov 10 at 13:51




          How would I expose a showDialog method to others when packaged as a component?
          – Joelio
          Nov 10 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 at 15:53




          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 at 15:53

















           

          draft saved


          draft discarded















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232318%2fwhat-is-the-proper-way-to-interact-with-inner-components-within-the-shadowdom-us%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Darth Vader #20

          How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

          Ondo