How can I conditionally control a modal height?

Question

I have a custom component that allows the parent component to use a modal dialog. The component has a slot that the caller can use to customize the content in the body. We've found a use case where we want the hight to be manually set. I've been able to do this within the component by using the following CSS:

.slds-modal__content {
    height: 920px;
}

The problem is I only want this to apply if the caller sends a height parameter. A technique I've used before to allow customized styles is calculated classes. The HTML has something like this:

<div class={containerClasses}>

And then the JS would be something like:

@api height = null;
get containerClasses() {
    return 'slds-modal__content' + (height ? ` manual-height` : '');
}

But to get to that point I experimented with renaming the selector to 'manual-height' in the CSS and adding the class to the HTML:

<div class="slds-modal__container manual-height">

But when I do this the height is no longer applied. Returning the CSS selector to just the SLDS class returns the manual height.

How can I get the height of the div to work with a selector other than slds-modal__container?

Answer 1

Add a variable to your CSS:

.slds-modal__content {
    height: var(--modal-height, 920px);
}

Now, in the component that wants to set the height, it can do so:

@api height = null;
renderedCallback() {
  if(this.height) {
    this.template.host.style.setAttribute('--modal-height', this.height);
  } else {
    this.template.host.style.removeAttribute('--modal-height');
  }
}

Now, you get the default height for all components that don't have the variable set, and you get the custom height for those that do. This example requires the units to be specified (e.g. height="250px").