Dialog / button fixes

- Get dialog contents visible in Firefox

Something in how Firefox parsed or inserted the style and children caused an error:
Node.insertBefore: Child to insert before is not a child of this node
which caused the dialog contents to be missing from the shadow DOM.  This fixes the missing contents by putting the style in using a different way.
This commit is contained in:
nathan 2022-03-28 11:28:40 -06:00
parent 27580ff4d7
commit 13d1289910

View File

@ -17,10 +17,14 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
protected _dialog : Et2Dialog; protected _dialog : Et2Dialog;
static get styles() /**
* I don't know what's going on with styles here, but if we define Et2DialogOverlay.styles it breaks
* dialog display in Firefox.
* The styles are added in render(), which is bad from a performance standpoint, but good in that it works.
*/
static get _styles()
{ {
return [ return css`
css`
:host { :host {
display: inline-block; display: inline-block;
background: white; background: white;
@ -89,8 +93,7 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
margin-left: auto; margin-left: auto;
order: 1; order: 1;
} }
`, `;
];
} }
get properties() get properties()
@ -188,16 +191,18 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
render() render()
{ {
// This style is just for this dialog // This style is just for this dialog
let style = html` let styles = [Et2DialogOverlay._styles];
<style>
.overlay {
${this.width ? "width: " + this.width + "px" : ""};
${this.height ? "height: " + this.height + "px" : ""};
}
</style>`;
if(this.width && Number.isInteger(this.width))
{
styles.push(css`.overlay {width: ${this.width}px}`);
}
if(this.height && Number.isInteger(this.height))
{
styles.push(css`.overlay {height: ${this.height}px}`);
}
return html` return html`
${(this.width || this.height) ? style : ""} <style>${styles}</style>
<div class="overlay"> <div class="overlay">
<div class="overlay__header"> <div class="overlay__header">
<h1 class="overlay__heading"> <h1 class="overlay__heading">