LWCクイックアクションのモーダルの横幅を変更する

はじめに

Salesforceでレコードの詳細画面からカスタムのレコード操作をする際にクイックアクションを作成します。現在、クイックアクションはLWC (Lightning Web Components)で開発するのがナウでヤングでイケイケとされていますが、一つの欠点としてモーダルの横幅が難しいという問題があります。

これを根本的に解決するには、クイックアクションの設定画面かLWCのメタデータあたりから横幅を指定できるようになるのが正着です。が、全然できるようにしてくれないのである程度強引な方法をとります。

解決方法

3案くらいあります

1. 静的リソースからグローバルにスタイルを読み込み

静的リソースとしてモーダルのclassのスタイルを上書きするcssをアップロードしておき、loadStyle()することでモーダルのスタイルを上書きする方法です。
が、この方法は「静的リソースに資材のアップロードが必要」「クイックアクション以外のモーダルに影響を及ぼす可能性がある」という点でちょっと微妙です。

参考: https://www.salesforcebolt.com/2021/08/increase-size-width-of-lightning-web.html

2. インラインスタイルを自分の親モーダルに当てる

1.の微妙な点を払拭すべく、今回はこの方法をとります。親モーダルの判定は最近出てきたcssセレクタである:has()を使えば簡単に実現できるので、親モーダルをlwcから取得してインラインスタイルを当てます。
自分の親のモーダルのみに影響範囲を留められ、LWCに閉じて外部リソースを必要としない点において1.よりスマートな感じがします。

追記 (2025/09/04)
APIバージョン 62.0 (Winter'25) あたりから、LightningElementから自身のHTMLElementを直接参照できるhostElement要素が追加されています
これを使うと、has()セレクタを使う方法よりスマートに親のモーダルコンテナを特定できます

実装の具体例

3. ヘッドレスアクションからlightning-modalを開く

lightning-modalは開くときに横幅を指定することができるので、クイックアクションの種別を画面アクションからヘッドレスアクションに変更してlightning-modalとして開く方法です。
これはスマートな方法ですが、画面アクションとはナビゲーションの挙動が違う（「戻る」でアクションが閉じるか元画面が戻るか）点は注意する必要があります（History APIから吸収すればいいのかもしれませんが）。

できあがり

クイックアクションのLWCのconnectedCallback()にて、自分の先祖のモーダルコンテナのwidthを変更します。

export default class QuickAction extends LightningElement {
  connectedCallback() {
    const query = `.slds-modal__container:has(${this.tagName})`;
    document.querySelectorAll(query).forEach(elem => {
      const style = elem.style;
      style.width = '90%';
      style.maxWidth = '90%';
    });
  }
}

適用前

適用後

もう少しアップグレードする

connectedCallback()にいちいちこれを書くのはめんどいです。こんな感じの関数としてUtilityとかのモジュールから公開されているとより便利そうです。

hostElementを使ったやり方 (追記 2025/09/04)

const MODAL_WIDTH_STYLES = {
  large: {
    width: '90%',
    maxWidth: '90%'
  },
  small: {
    width: '60%',
    maxWidth: '60%'
  },
  ......
};

export const changeModalWidth = (target, size) => {
  const modalStyles = MODAL_WIDTH_STYLES[size];
  if (!modalStyles) return;

  const container = target.hostElement.closest('.slds-modal__container');
  Object.assign(container.style, modalStyles);
};

import { changeModalWidth } from 'c/someUtils';

export default class QuickAction extends LightningElement {
  connectedCallback() {
    changeModalWidth(this, 'large');
  }
}

以前のやり方

const MODAL_WIDTH_STYLES = {
  large: {
    width: '90%',
    maxWidth: '90%'
  },
  small: {
    width: '60%',
    maxWidth: '60%'
  },
  ......
};

export const changeModalWidth = (target, size) => {
  const styles = MODAL_WIDTH_STYLES[size];
  if (!styles) return;

  const query = `.slds-modal__container:has(${target.tagName})`;
  document.querySelectorAll(query).forEach(elem => {
    Object.entries(styles).forEach(([key, value]) => {
      elem.style[key] = value;
    });
  });
};

import { changeModalWidth } from 'c/someUtils';

export default class QuickAction extends LightningElement {
  connectedCallback() {
    changeModalWidth(this, 'large');
  }
}