照明要素とそれに基づくWebコンポーネントの知識

ある時点で、私は緊急にWebコンポーネントに精通し、それらを使用して便利に開発する方法を見つけなければなりませんでした。 次のような一連の記事を書く予定です

何らかの形でWebコンポーネントの知識を整理し、要素を明るくし、他の人のためにこの技術の簡単な紹介をします。 私はこの技術の専門家ではありませんので、フィードバックを喜んで受け入れます。

lit-elementは、ネイティブWebコンポーネントのラッパー（基本テンプレート）です。 仕様にない多くの便利なメソッドを実装しています。 ネイティブ実装に近いため、lit-elementは他のアプローチと比較してさまざまなベンチマークで非常に良い結果を示しています（2019年2月6日現在）。

lit-elementをWebコンポーネントの基本クラスとして使用することで得られるボーナス：

1. この技術はすでに第2のバージョンを実装しており、「小児病で病気になった」ことがありますが、これは登場したばかりの器具に特有のものです。
2. アセンブリは、ポリマーとウェブパック、タイプスクリプト、ロールアップなどの両方で実行できます。これにより、問題なく最新のプロジェクトに照明要素を埋め込むことができます。
3. lit要素には、値の入力、開始、変換に関してプロパティを操作する非常に便利なシステムがあります。
4. lit-elementは、reactとほぼ同じロジックを実装しています。 コンポーネントとそのレンダリングを構築するための単一のテンプレートを提供し、開発者がエコシステムと追加のライブラリを選択することを制限しません。

lit-elementで簡単なWebコンポーネントを作成しましょう。 ドキュメントを見てみましょう。 次のものが必要です。

1. lit-elementを含むnpmパッケージをアセンブリに追加します
   
   
   
   

   npm install --save lit-element
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

2. コンポーネントを作成します。

たとえば、 my-component



タグで初期化されたWebコンポーネントを作成する必要があります。 これを行うには、jsファイルmy-component.js



を作成し、その基本テンプレートを定義します。

 //       lit-element import { } from ''; //      class MyComponent { } //      customElements.define();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、基本テンプレートをインポートします。

 import { LitElement, html } from 'lit-element'; // LitElement -    ()   - // html -  lit-html,     ,  //    html   
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、 LitElement



を使用してWebコンポーネント自体を作成します

 //   ,    //  LitElement    HTMLElement class MyComponent extends LitElement { //    LitElement   //      constructor  connectedCallback //           //    ,       // shadowDOM   {mode: 'open'} render() { return html`<p>Hello World!</p>` } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、ブラウザにWebコンポーネントを登録します

 customElements.define('my-component', MyComponent);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、次の結果が得られます。

 import { LitElement, html } from 'lit-element'; class MyComponent extends LitElement { render() { return html`<p>Hello World!</p>` } } customElements.define('my-component', MyComponent);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

my-component.js



をhtmlに接続する必要がない場合は、それだけです。 最も単純なコンポーネントが用意されています。

車輪を再発明せず、lit-element-build-rollupの完成したアセンブリを取得することを提案します。 指示に従ってください：

 git clone https://github.com/PolymerLabs/lit-element-build-rollup.git cd lit-element-build-rollup npm install npm run build npm run start
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのコマンドが完了したら、ブラウザーのページhttp：// localhost：5000 /に移動します。

htmlを見ると、 webcomponents-loader.jsが終了タグの前にあることがわかります。 これは、Webコンポーネント用のポリフィルのセットであり、Webコンポーネントのクロスブラウザ操作のために、このポリフィルが存在することが望ましいです。 Webコンポーネントを操作するためのすべての標準を実装するブラウザーの表を見てみましょう。EDGEはまだ標準を完全には実装していないと言います（サポートが必要なIE11については黙っています）。

このポリフィルに2つのオプションを実装しました：

1. webcomponents-bundle.js-このバージョンにはポリフィルのすべての可能なオプションが含まれており、すべて開始されますが、各ポリフィルは検出された兆候に基づいてのみ機能します。
2. webcomponents-loader.jsは、検出された症状に基づいて、必要なポリフィルをロードする最小限のブートローダーです

また、別のpolyfill- custom-elements-es5-adapter.jsにも注意してください。 仕様によれば、ネイティブcustomElements.defineに追加できるのはES6クラスのみです。 最高のパフォーマンスを得るには、ES6コードをサポートするブラウザーにのみES6コードを転送し、他のすべてのユーザーにES5コードを転送する必要があります。 これが常に可能であるとは限らないため、ブラウザー間の互換性を高めるために、すべてのES6コードをES5に変換することをお勧めします。 ただし、この場合、ES5のWebコンポーネントはブラウザーで動作できません。 この問題を解決するために、custom-elements-es5-adapter.jsがあります。

./src/my-element.js



ファイルを開きましょう

 import {html, LitElement, property} from 'lit-element'; class MyElement extends LitElement { // @property - ,    babel  ts //         //  ,   @property({type: String}) myProp = 'stuff'; render() { return html` <p>Hello World</p> ${this.myProp} `; } } customElements.define('my-element', MyElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

lit-htmlテンプレートエンジンは、文字列を異なる方法で処理できます。 いくつかのオプションを紹介します。

 //  : html`<div>Hi</div>` // : html`<div>${this.disabled ? 'Off' : 'On'}</div>` // : html`<x-foo .bar="${this.bar}"></x-foo>` // : html`<div class="${this.color} special"></div>` //   boolean,  checked === false, //        HTML: html`<input type="checkbox" ?checked=${checked}>` //  : html`<button @click="${this._clickHandler}"></button>`
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

render（）関数を最適化するためのヒント：

• 要素の状態を変更してはいけません
• 副作用があってはいけません、
• 要素のプロパティのみに依存する必要があります。
• 同じ値を送信する場合、同じ結果を返す必要があります。

render（）関数の外部でDOMを更新しないでください。

Lit-htmlはlit-elementのレンダリングを担当します-これは、Webコンポーネントの表示方法を記述する宣言的な方法です。 lit-htmlは、変更が必要なDOMの部分のみを変更することにより、高速更新を保証します。

このコードのほとんどは簡単な例ですが、 myProp



プロパティに@property



デコレータが追加されました。 このデコレータは、 my-element



myprop



という名前の属性が必要であることを示しています。 そのような属性が設定されていない場合、デフォルトで文字列値stuff



設定されます。

 <!--  myProp  ,       -   'stuff' --> <my-element></my-element> <!--  myprop         lowerCamelCase .. myProp   -      'else' --> <my-element myprop="else"></my-element>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

lit-elementは、 property



を操作する2つの方法を提供しproperty



。

1. デコレータを通して。
2. 静的なゲッターproperties
   
   
   
   介して。

最初のオプションでは、各プロパティを個別に指定できます。

 @property({type: String}) prop1 = ''; @property({type: Number}) prop2 = 0; @property({type: Boolean}) prop3 = false; @property({type: Array}) prop4 = []; @property({type: Object}) prop5 = {};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目はすべてを1か所で指定することですが、この場合、プロパティにデフォルト値がある場合は、クラスコンストラクターメソッドで記述する必要があります。

 static get properties() { return { prop1: {type: String}, prop2: {type: Number}, prop3: {type: Boolean}, prop4: {type: Array}, prop5: {type: Object} }; } constructor() { this.prop1 = ''; this.prop2 = 0; this.prop3 = false; this.prop4 = []; this.prop5 = {}; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

lit-elementでプロパティを操作するためのAPIは非常に広範囲です：

• 属性 ：プロパティが監視可能な属性になることができるかどうか。 false
  
  
  
  場合、属性は監視から除外され、ゲッターは作成されません。 true
  
  
  
  またはattribute
  
  
  
  存在しない場合、getterでlowerCamelCase形式で指定されたプロパティは、文字列形式の属性に対応します。 my-prop
  
  
  
  などの文字列が指定されている場合、属性内の同じ名前に対応します。
• converter ：値を/から属性/プロパティに変換する方法の説明が含まれています。 値は、値をシリアル化および逆シリアル化するように機能する関数にすることも、 fromAttribute
  
  
  
  およびtoAttribute
  
  
  
  キーを持つオブジェクトにすることもできます。これらのキーには、値を変換するための個別の関数が含まれます。 デフォルトでは、プロパティには基本タイプBoolean
  
  
  
  、 String
  
  
  
  、 Number
  
  
  
  、 Object
  
  
  
  およびArray
  
  
  
  への変換が含まれています。 変換規則はここにリストされています 。
• type ：このプロパティに含まれる基本タイプの1つを示します。 プロパティに含まれるタイプに関するコンバーターの「ヒント」として使用されます。
• 反映する ：属性をプロパティに関連付け（ true
  
  
  
  ）、 type
  
  
  
  およびconverter
  
  
  
  からの規則に従って変更する必要があるかどうかを示します。
• hasChanged ：各プロパティはそれを持ち、古い値と新しい値の間に変化があるかどうかを決定する関数を含み、それぞれBoolean
  
  
  
  返します。 true
  
  
  
  場合、アイテムの更新を開始します。
• noAccessor ：このプロパティはBoolean
  
  
  
  を受け入れ、デフォルトはfalse
  
  
  
  です。 クラスからアクセスするための各プロパティのゲッターとセッターの生成を禁止します。 これは変換をキャンセルしません。

架空の例を作成しましょう。文字列を含むパラメーターを含むWebコンポーネントを作成します。この単語は画面に描画される必要があり、各文字は前の文字よりも大きくなります。

 <!-- index.html --> <ladder-of-letters letters=""></ladder-of-letters>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 //ladder-of-letters.js import {html, LitElement, property} from 'lit-element'; class LadderOfLetters extends LitElement { @property({ type: Array, converter: { fromAttribute: (val) => { // console.log('in fromAttribute', val); return val.split(''); } }, hasChanged: (value, oldValue) => { if(value === undefined || oldValue === undefined) { return false; } // console.log('in hasChanged', value, oldValue.join('')); return value !== oldValue; }, reflect: true }) letters = []; changeLetter() { this.letters = ['','','','','']; } render() { // console.log('in render', this.letters); //    ,    //        return html` <div>${this.letters.map((i, idx) => html`<span style="font-size: ${idx + 2}em">${i}</span>`)}</div> // @click     ,     //   'click'    <button @click=${this.changeLetter}>  ''</button> `; } } customElements.define('ladder-of-letters', LadderOfLetters);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最終的には次のようになります。

ボタンが押されると、プロパティが変更され、最初にチェックが行われ、その後再描画のために送信されました。

reflect



を使用すると、HTMLの変更も確認できます

このWebコンポーネントの外部のコードでこの属性を変更すると、Webコンポーネントも再描画されます。

次に、コンポーネントのスタイルを検討します。 lit-elementのスタイル設定には2つの方法があります。

1. スタイルタグをrenderメソッドに追加してスタイリング
   
   
   
   

    render() { return html` <style> p { color: green; } </style> <p>Hello World</p> `; }
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   
2. 静的ゲッターstyles
   
   
   
   経由
   
   
   
   

    import {html, LitElement, css} from 'lit-element'; class MyElement extends LitElement { static get styles() { return [ css` p { color: red; } ` ]; } render() { return html` <p>Hello World</p> `; } } customElements.define('my-element', MyElement);
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   

その結果、スタイルを持つタグは作成されず、 仕様に従って要素のShadow DOM



書き込まれます（ >= Chrome 73



）。 これにより、多数の要素のパフォーマンスが向上します。 新しいコンポーネントを登録するとき、彼は既に自分のスタイルが決定するプロパティを知っているので、毎回登録して再カウントする必要はありません。

同時に、この仕様がサポートされていない場合、通常のstyle



タグがコンポーネントに作成されます。

さらに、この方法で、ページに追加および計算されるスタイルを分離できることも忘れないでください。 たとえば、CSSではなくJSでメディアクエリを使用し、たとえば、目的のスタイルのみを実装するには（これはワイルドですが、そうする必要があります）：

 static get styles() { const mobileStyle = css`p { color: red; }`; const desktopStyle = css`p { color: green; }`; return [ window.matchMedia("(min-width: 400px)").matches ? desktopStyle : mobileStyle ]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、ユーザーが画面幅が400pxを超えるデバイスにログオンした場合、これが表示されます。

これは、ユーザーが幅400ピクセル未満のデバイスからサイトにアクセスした場合です。

私の意見：ユーザーがモバイルデバイスで作業しているときに、画面幅が1920pxの本格的なモニターに突然直面する場合、実際に適切なケースはありません。 これにコンポーネントの遅延読み込みを追加します。 その結果、高速コンポーネントレンダリングで非常に最適化されたフロントが得られます。 唯一の問題は、サポートの難しさです。

ここで、lit-elementのライフサイクルメソッドに精通することを提案します。

• render（） ： lit-html
  
  
  
  を使用してDOM要素の説明を実装します。 理想的には、 render
  
  
  
  関数は、要素の現在のプロパティのみを使用する純粋な関数です。 render()
  
  
  
  メソッドは、 update()
  
  
  
  関数によって呼び出されます。
• shouldUpdate（changedProperties） ：更新およびレンダリングを制御する必要がある場合、プロパティが変更されたとき、またはrequestUpdate()
  
  
  
  呼び出されたときに実装requestUpdate()
  
  
  
  れます。 changedProperties
  
  
  
  関数の引数は、変更されたプロパティのキーを含むMap
  
  
  
  です。 デフォルトでは、このメソッドは常にtrue
  
  
  
  を返しtrue
  
  
  
  が、メソッドのロジックを変更してコンポーネントの更新を制御できます。
• performUpdate（） ：スケジューラーと統合するなど、更新時間を制御するために実装されています。
• update（changedProperties） ：このメソッドはrender()
  
  
  
  呼び出しrender()
  
  
  
  。 また、プロパティの値に従って要素の属性を更新します。 このメソッド内でプロパティを設定しても、別の更新は発生しません。
• firstUpdated（changedProperties） ：DOM要素の最初の更新後に、 updated()
  
  
  
  呼び出しの直前に呼び出されます。 このメソッドは、たとえばupdated()
  
  
  
  で直接作業する必要がある視覚化された静的ノードへのリンクをキャプチャするのに役立ちます。
• updated（changedProperties） ：アイテムのDOMが更新および表示されるたびに呼び出されます。 DOM APIを介して更新した後にタスクを実行するための実装。たとえば、要素に焦点を合わせます。
• requestUpdate（name、oldValue） ：アイテムの非同期更新リクエストを呼び出します。 これは、プロパティの設定が原因ではない何らかの状態に基づいてアイテムを更新する必要があるときに呼び出す必要があります。
• createRenderRoot（） ：デフォルトでは、アイテムのシャドウルートを作成します。 Shadow DOMを使用する必要がない場合、メソッドはthis
  
  
  
  を返す必要があります。

アイテムの更新方法：

• プロパティには新しい値が与えられます。
• hasChanged(value, oldValue)
  
  
  
  がfalse
  
  
  
  場合、アイテムは更新されません。 それ以外の場合、 requestUpdate()
  
  
  
  呼び出して更新を計画します。
• requestUpdate（） ： マイクロタスクの後（イベントループの最後で、次の再描画の前）に要素を更新します。
• performUpdate（） ：更新が進行中であり、残りの更新APIを継続します。
• shouldUpdate（changedProperties） ： true
  
  
  
  返された場合、更新が続行されtrue
  
  
  
  。
• firstUpdated（changedProperties） ：アイテムが初めて更新されたとき、 updated()
  
  
  
  呼び出す直前に呼び出さupdated()
  
  
  
  ます。
• update（changedProperties） ：アイテムを更新します。 このメソッドでプロパティを変更しても、別の更新は発生しません。
  
  
  • render（） ：DOMの要素をレンダリングするためのlit-html
    
    
    
    テンプレートを返します。 このメソッドでプロパティを変更しても、別の更新は発生しません。
  
  
  
• updated（changedProperties） ：アイテムが更新されるたびに呼び出されます。

コンポーネントのライフサイクルのすべてのニュアンスを理解するには、 ドキュメントを参照することをお勧めします。

仕事では、Adobe Experience Manager（AEM）のプロジェクトがあります。オーサリングでは、ユーザーがコンポーネントをページにドラッグアンドドロップできます。AEMイデオロギーによれば、このコンポーネントには、このコンポーネントのロジックを実装するために必要なすべてを含むscript



タグが含まれています。 しかし実際には、このアプローチは多くのブロッキングリソースとこのシステムでのフロントの実装に関する困難を引き起こしました。 フロントを実装するために、Webコンポーネントはサーバー側のレンダリングを変更しない方法として選択され（非常にうまくいきました）、古い実装を新しいアプローチでビット単位で穏やかに強化しました。 私の意見では、このシステムのWebコンポーネントのロードを実装するためのいくつかのオプションがあります：バンドルを収集する（非常に大きくなる可能性があります）か、チャンクに分割する（多くの小さなファイル、動的ロードが必要です）、またはそれぞれにスクリプトを埋め込む現在のアプローチを使用しますサーバー側でレンダリングされるコンポーネント（私は本当にこれに戻りたくありません）。 私の意見では、最初と3番目のオプションはオプションではありません。 第二に、ステンシルのように、動的ブートローダーが必要です。 しかし、「ボックス」内の照明要素の場合、これは提供されません。 lit-element開発者側でダイナミックブートローダーを作成しようとしましたが、これは実験であり、実稼働環境での使用は推奨されていません。 また、lit-element開発者からは、Webコンポーネント仕様リポジトリに、ページ上のhtmlマークアップに基づいてWebコンポーネントに必要なjsを動的にロードする機能を仕様に追加する提案があります。 そして、私の意見では、このネイティブツールは、Webコンポーネントの単一の初期化ポイントを作成し、サイトのすべてのページに単純に追加できる非常に優れたアイデアです。

PolymerLabsのスタッフが照明要素ベースのWebコンポーネントを動的に読み込むために、 分割要素が開発されました。 これは実験的な解決策です。 次のように機能します。

• SplitElementを作成するには、2つのモジュールに2つの要素定義を記述します。
• それらの1つは、要素の読み込まれた部分を定義する「スタブ」です。通常、これは名前とプロパティです。 プロパティは、lit-elementがタイムリーに観察可能な属性を生成してcustomElements.define()
  
  
  
  を呼び出すことができるように、スタブで定義する必要があります。
• スタブには、実装クラスを返す静的非同期ロードメソッドも必要です。
• 別のクラスは「実装」で、他のすべてが含まれます。
• SplitElement
  
  
  
  コンストラクターは実装クラスをロードし、 upgrade()
  
  
  
  を実行しupgrade()
  
  
  
  。

スタブの例：

 import {SplitElement, property} from '../split-element.js'; export class MyElement extends SplitElement { // MyElement    load   //      connectedCallback()   static async load() { //        //      MyElement return (await import('./my-element-impl.js')).MyElementImpl; } //      //   - @property() message: string; } customElements.define('my-element', MyElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実装例：

 import {MyElement} from './my-element.js'; import {html} from '../split-element.js'; // MyElementImpl  render    - export class MyElementImpl extends MyElement { render() { return html` <h1>I've been upgraded</h1> My message is ${this.message}. `; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ES6でのSplitElementの例：

 import {LitElement, html} from 'lit-element'; export * from 'lit-element'; //    LitElement  SplitElement //       export class SplitElement extends LitElement { static load; static _resolveLoaded; static _rejectLoaded; static _loadedPromise; static implClass; static loaded() { if (!this.hasOwnProperty('_loadedPromise')) { this._loadedPromise = new Promise((resolve, reject) => { this._resolveLoaded = resolve; this._rejectLoaded = reject; }); } return this._loadedPromise; } //      - //      static _upgrade(element, klass) { SplitElement._upgradingElement = element; Object.setPrototypeOf(element, klass.prototype); new klass(); SplitElement._upgradingElement = undefined; element.requestUpdate(); if (element.isConnected) { element.connectedCallback(); } } static _upgradingElement; constructor() { if (SplitElement._upgradingElement !== undefined) { return SplitElement._upgradingElement; } super(); const ctor = this.constructor; if (ctor.hasOwnProperty('implClass')) { //   ,   ctor._upgrade(this, ctor.implClass); } else { //    if (typeof ctor.load !== 'function') { throw new Error('A SplitElement must have a static `load` method'); } (async () => { ctor.implClass = await ctor.load(); ctor._upgrade(this, ctor.implClass); })(); } } //       render() { return html``; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ロールアップで上記のアセンブリを使用している場合は、動的インポートを処理できるようにbabelを設定してください

 npm install @babel/plugin-syntax-dynamic-import
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.babelrc設定で追加

 { "plugins": ["@babel/plugin-syntax-dynamic-import"] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、遅延ロードを使用したWebコンポーネントの実装の小さな例を作成しました。https ： //github.com/malay76a/elbrus-split-litelement-web-components

Webコンポーネントの動的読み込みのアプローチを適用しようとしましたが、次の結論に達しました：ツールは非常に機能しているため、Webコンポーネントのすべての定義を1つのファイルに収集し、コンポーネント自体の説明を個別にチャンクで接続する必要があります。 http2がないと、このアプローチは機能しません。なぜなら、 コンポーネントを記述する小さなファイルの非常に大きなプールが形成されます。 原子設計の原則に基づいて、 原子のインポートはボディで決定する必要がありますが、ボディは別のコンポーネントとして既に接続されています。 ボトルネックの1つは、ユーザーがブラウザーでユーザー要素の多くの定義を受け取り、それがブラウザーで何らかの方法で初期化され、初期状態が決定されることです。 このようなソリューションは冗長です。 コンポーネントローダーの簡単なソリューションのオプションの1つは、次のアルゴリズムです。

1. 必要なユーティリティをロードします。
2. ポリフィルのロード、
3. ライトDOMからカスタム要素を組み立てます。
   
   
   1. タグ名にハイフンを含むすべてのDOM要素が選択されます
   2. リストはフィルタリングされ、リストは最初の要素で構成されます。
4. 受信したユーザー要素のループを開始します。
   
   
   1. Intersection Observer,
   2. +- 100px import.
5. 1. 3 shadowDOM,
   2. , shadowDOM , , import JS.
   
   
   

- lit-element open-wc.org . webpack rollup, - storybook, IDE.

追加のリンク：

1. Let's Build Web Components! Part 5: LitElement
2. Web Component Essentials
3. Lit-HTMLを試す夜...
4. LitElement To Doアプリ
5. LitElementアプリチュートリアルパート1：はじめに
6. LitElementチュートリアルパート2：テンプレート、プロパティ、イベント
7. LitElementチュートリアルパート3：Reduxによる状態管理
8. LitElementチュートリアルパート4：ナビゲーションとコード分割
9. LitElementチュートリアルパート5：PWAとオフライン
10. Lit-htmlワークショップ
11. 素晴らしいlit-html