コンポーネントの動的なインスタンス化

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3  <apiVersion>59.0</apiVersion>
4  <capabilities>
5    <capability>lightning__dynamicComponent</capability>
6  </capabilities>
7</LightningComponentBundle>

1<template>
2    <div class="container">
3        <lwc:component lwc:is={componentConstructor}></lwc:component>
4    </div>
5</template>

1import { LightningElement } from "lwc";
2export default class extends LightningElement {
3  componentConstructor;
4  // Use connectedCallback() on the dynamic component
5  // to signal when it's attached to the DOM
6  connectedCallback() {
7    import("c/concreteComponent")
8      .then(({ default: ctor }) => (this.componentConstructor = ctor))
9      .catch((err) => console.log("Error importing component"));
10  }
11}

1<div class="container">
2  <c-concrete-component></c-concrete-component>
3</div>

1import { LightningElement } from "lwc";
2export default class App extends LightningElement {
3  componentConstructor;
4  async connectedCallback() {
5    const { default: ctor } = await import("c/myComponent");
6    this.componentConstructor = ctor;
7  }
8}

1<template>
2    <lwc:component lwc:is={componentConstructor}
3                lwc:ref="myCmp">
4    </lwc:component>
5</template>

1import { LightningElement } from "lwc";
2export default class extends LightningElement {
3  componentConstructor;
4
5  connectedCallback() {
6    import("lightning/concreteComponent")
7      .then(({ default: ctor }) => (this.componentConstructor = ctor))
8      .catch((err) => console.log("Error importing component"));
9  }
10
11  renderedCallback() {
12    // this.refs.myCmp will be available on the next rendering cycle after the constructor is set
13    if (this.refs.myCmp) {
14      // this.refs.myCmp will contain a reference to the DOM node
15      console.log(this.refs.myCmp);
16    }
17  }
18}

1<template>
2    <lwc:component lwc:is={ctor}>
3        <span>child</span>
4    </lwc:component>
5</template>

1import { LightningElement } from "lwc";
2import StaticImport from "c/static-import";
3
4export default class BundleExample extends LightningElement {
5  async loadModule() {
6    const { default: DynamicImport } = await import("c/dynamic-import");
7    return DynamicImport;
8  }
9}

1import("c/analyzable"); // 👍: Statically analyzable
2import("c/" + "analyzable"); // 👎: Not statically analyzable
3import("c/" + componentName); // 👎: Not statically analyzable

1// 👎 DON'T USE THIS
2// Example with non statically analyzable dynamic import:
3import { LightningElement, api } from "lwc";
4
5const KNOWN_TYPE = new Set(["bar", "pie", "line"]);
6
7export default class App extends LightningElement {
8  chartCtor;
9
10  _type = "line";
11
12  @api
13  get type() {
14    return this._type;
15  }
16  set type(val) {
17    if (!KNOWN_TYPE.has(val)) {
18      console.warn(`Unknown chart type: ${val}`);
19    }
20
21    this._type = val;
22
23    const chartComponentName = `c/${val}Chart`;
24    import(chartComponentName).then(({ default: ChartCtor }) => {
25      this.chartCtor = ChartCtor;
26    });
27  }
28}

1// 👍 USE THIS
2// Example with static imports:
3import { LightningElement, api } from "lwc";
4
5import BarChart from "c/barChart";
6import PieChart from "c/pieChart";
7import LineChart from "c/lineChart";
8
9const KNOWN_TYPE = new Set(["bar", "pie", "line"]);
10const CHART_MAPPING = {
11  bar: BarChart,
12  pie: PieChart,
13  line: LineChart,
14};
15
16export default class App extends LightningElement {
17  chartCtor;
18
19  _type = "line";
20
21  @api
22  get type() {
23    return this._type;
24  }
25  set type(val) {
26    if (!KNOWN_TYPE.has(val)) {
27      console.warn(`Unknown chart type: ${val}`);
28    }
29
30    this._type = val;
31    this.chartCtor = CHART_MAPPING[val];
32  }
33}

1// 👍 USE THIS
2// Example with statically analyzable dynamic import:
3import { LightningElement, api } from "lwc";
4
5const KNOWN_TYPE = new Set(["bar", "pie", "line"]);
6const CHART_MAPPING = {
7  bar: () => import("c/barChart"),
8  pie: () => import("c/pieChart"),
9  line: () => import("c/lineChart"),
10};
11
12export default class App extends LightningElement {
13  chartCtor;
14
15  _type = "line";
16
17  @api
18  get type() {
19    return this._type;
20  }
21  set type(val) {
22    if (!KNOWN_TYPE.has(val)) {
23      console.warn(`Unknown chart type: ${val}`);
24    }
25
26    this._type = val;
27    CHART_MAPPING[val]().then(({ default: ChartCtor }) => {
28      this.chartCtor = ChartCtor;
29    });
30  }
31}

1// 👎 DON'T USE THIS
2// Example with component name as prop:
3import { LightningElement, api } from "lwc";
4
5export default class Field extends LightningElement {
6  rendererCtor;
7
8  _renderer;
9
10  @api
11  get renderer() {
12    return this._renderer;
13  }
14  set renderer(val) {
15    this._renderer = val;
16
17    import(val).then(({ default: rendererCtor }) => {
18      this.rendererCtor = rendererCtor;
19    });
20  }
21}

1// 👍 USE THIS
2// Example with component constructor as prop:
3import { LightningElement, api } from "lwc";
4
5export default class Field extends LightningElement {
6  @api rendererCtor;
7}