Clever Geek Handbook

実世界のWebコンポーネント（パート2）

私の出版物「実世界のWebコンポーネント」から1年以上が経過し、このテクノロジーの何がまだ間違っているのかについての新しい観察を蓄積してきました。おそらく、これらのポイントにより、誰かがプロジェクトの行き詰まりを回避できるようになります。



さびた車フォトブランドンMolitwenikにUnsplash



壊れたHTML



HTMLには、JavaScriptを使用せずに機能を実装できる多くの便利な機能があります。これらの機能の1つは、任意の入力フィールドでEnterキーを押してフォームを送信する機能です。次に例を示します。



<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <button>Send!</button>
</form>


テキストを入力してEnterキーを押すと、データはJavaScriptなしでサーバーに送信されます。必要に応じて、ページの再読み込みを回避し、AJAXを介してデータを送信できますが、この場合、JSの量は最小限になります。



それでは、通常のボタンをWebコンポーネントに置き換えてみましょう。



<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <my-button>Send!</my-button>
</form>


Webコンポーネントのmy-button内部には同じボタンが含まれており、視覚的な違いはありません。しかし、Enterキーを押してフォームを送信すると壊れました。これがデモです、あなたはあなた自身で見ることができます。



? -, . , . , : Javascript, , -. , - 8 , production-ready.



, -. HTML , label. , , . -! :



<label>First name: <input type="text"></label>
<label>Last name: <my-input></label>


, input "First name", "Last name" - . ! 2 , . – label input . , ? , - -, - ( , ShadowDOM).



CSP



" , ". CSP – , . CSP <style></style> , <link rel="stylesheet"> (, style- , 'unsafe-inline', , ).



-? , ShadowDOM , , ShadowDOM style-, CSP. - : Stencil () LitElement ().



– Constructable Stylesheets API, ShadowDOM unsafe-inline. – CSP, -.



Lifecycle-



, . , ( material-web-components):



<my-menu>
    <my-menu-item />
    <my-menu-item />
</my-menu>


- . connectedCallback. - DOM . , . :



class MyMenu extends HTMLElement {
    connectedCallback() {
        console.log('my menu')
    }
}

class MyMenuItem extends HTMLElement {
    connectedCallback() {
        console.log('my menu item')
    }
}

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)


, :



"my menu"
"my menu item"
"my menu item"


connectedCallback , . , . , :



"my menu item"
"my menu item"
"my menu"


? my-menu ? HTML , 



// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

// 
customElements.define('my-menu-item', MyMenuItem)
customElements.define('my-menu', MyMenu)


, connectedCallback. , , . " " , window.setTimeout . " " , . -



, :



Webコンポーネントは、スポイラー内部のレンダリングを停止できません。コンポーネントがアクティブ化されるまでに、このスポイラーを開きたくなかったとしても、内部イメージはすでにロードを開始し、トラフィックを消費します。



結論



ウェブコンポーネント全体にレーキが散らばっていて、Googleのマーケティングが散りばめられています。規格にはまだ多くの未解決の問題があり、プロジェクトにとって克服できない障害となる可能性があります。Webコンポーネントとそれらに基づくフレームワークを使用するか、単純な古いHTML / JS / CSSアプローチを使用するかをより多くの情報に基づいて決定するために、潜在的な落とし穴について事前に知っておくと役立ちます。この記事がお役に立てば幸いです。お読みいただきありがとうございます。



More articles:


All Articles