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.
polymer-3.x lit-element paper-dialog
add a comment |
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.
polymer-3.x lit-element paper-dialog
add a comment |
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.
polymer-3.x lit-element paper-dialog
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
polymer-3.x lit-element paper-dialog
asked yesterday
Joelio
2,16542760
2,16542760
add a comment |
add a comment |
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.
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
15 hours ago
How would I expose a showDialog method to others when packaged as a component?
– Joelio
15 hours ago
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
13 hours ago
add a comment |
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.
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
15 hours ago
How would I expose a showDialog method to others when packaged as a component?
– Joelio
15 hours ago
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
13 hours ago
add a comment |
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.
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
15 hours ago
How would I expose a showDialog method to others when packaged as a component?
– Joelio
15 hours ago
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
13 hours ago
add a comment |
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.
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.
answered 20 hours ago
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
15 hours ago
How would I expose a showDialog method to others when packaged as a component?
– Joelio
15 hours ago
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
13 hours ago
add a comment |
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
15 hours ago
How would I expose a showDialog method to others when packaged as a component?
– Joelio
15 hours ago
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
13 hours ago
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
15 hours ago
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
15 hours ago
How would I expose a showDialog method to others when packaged as a component?
– Joelio
15 hours ago
How would I expose a showDialog method to others when packaged as a component?
– Joelio
15 hours ago
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
13 hours ago
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
13 hours ago
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password