Lightning Web Components（メタデータ）

AuraコンポーネントではComponentタグのimplementsで指定したコンポーネントのタイプは、メタファイル上で指定するように変更されている。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LWC_MyComponent">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <description>サンプルコンポーネント</description>
    <targets>
      <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

isExposedがfalseだと、App Builder上にコンポーネントとして表示されない。

targetsの指定

  <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
      <target>lightningCommunity__Page</target>
  </targets>

App Builder上で設定する設計プロパティを指定

<targetConfigs>
  <targetConfig targets="lightning__RecordPage">
    <property name="prop1" type="String" />
    <objects>
      <object>Account</object>
      <object>Opportunity</object>
    </objects>
  </targetConfig>
  <targetConfig targets="lightning__AppPage, lightning_HomePage">
    <property name="prop2" type="Boolean" />
    <property name="label" label="ラベル" type="String" description="画面に表示するラベルを入力して下さい" />
    <property name="type" label="表示タイプ" type="String" default="richtext" datasource="richtext,code,link"/>
  </targetConfig>
</targetConfigs>

設計プロパティは、コントローラJS内で@apiを付けて変数として定義すると、自動的に値がセットされる。

export default class xxxxx extends NavigationMixin(LightningElement) {
    /////////// design property
    @api
    type;

    @api
    prop2;

    @api
    label;

開発ガイド