Drag+Drop regions for LWR sites

Question

I'm working on an LWR site, and I've decided I need a Card component that'll let me drag and drop other components into it within the Experience Builder.

This should be possible via slots. I've followed the limited LWR information available, and came across some Design Labs components examples, but I can't get the drag and drop regions to show up. Is there something I'm missing here?

HTML:

<template>
    <div class="slds-card">
        <header class="slds-media slds-media_center slds-has-flexi-truncate" if:true={showHeader}>
            <div class="slds-media__figure" if:true={iconName}>
              <lightning-icon icon-name={iconName}></lightning-icon>
            </div>
            <div class="slds-media__body">
              <h2 class="slds-card__header-title">
                <a class="slds-card__header-link slds-truncate" title={title}>
                  <span>{title}</span>
                </a>
              </h2>
            </div>
            <div class="slds-no-flex" if:true={showActions}>
                <slot name="actions"></slot>
            </div>
          </header>
        <div class="slds-card__body slds-card__body_inner">
            <slot name="content">
                <div style="display: flex; justify-content: center; align-items: center; margin: 50px 0; flex-direction: column; text-align: center;"><div style="background-image: url(assets/img/desert.svg); background-size: cover; background-position: center; height: 300px; width: 100%; max-width: 600px; min-width: 300px;"></div><h1 class="slds-text-heading_medium slds-p-bottom_x-small">Start Building Your Page</h1> <div>Drag and drop a component into the content slots.</div></div>
            </slot>
        </div>
    </div>
</template>

Javscript:

import { LightningElement,api } from 'lwc';
/**
 * @slot content Card Body
 * @slot actions Actions
 */
export default class LwrCard extends LightningElement {
    @api title;
    @api iconName;
    @api showHeader;
    @api showActions;

}

Answer 1

I have this working now. After struggling to get the card to work, I decided to try switching to slds-box just to test the simplest possible version. I created this component, and sure enough, it worked.

<template>
    <div class="slds-box slds-theme_default">
        <slot name="content"></slot>
    </div>
</template>

import { LightningElement} from 'lwc';
/**
 * @slot content
 */
export default class LwrBox extends LightningElement {}

As a sanity check, I cleared my cache and tried the original card component again, and now it works too. No code changes.

Moral of the story: Salesforce is finicky. Clear that cache.