AureliaビューでBEMブロックを反映する方法

Question

Aureliaを使用して新しいプロジェクトを開始しようとしています。私はCSS BEMメソドロジと併用することを検討しています。

最初の質問：これは基本的には良いマッチと見なされますか、それともAureliaとの「適合」の選択肢がありますか？

主な質問：

ベストいくつかのカスタムアウレリアビュー（アプリケーションヘッダ）のための例で説明した：

<template> 
    <div class="AppHeader"> 
     <span class="AppHeader-logo"></span> 
     <span class="AppHeader-text"></span> 
     <app-menu></app-menu> 
    </div> 
</template> 

別のビューに埋め込まれた場合、これはこのような結果として得られるDOMにつながり（簡体字）：明らか

<app-header> 
    <div class="AppHeader"> 
     <span class="AppHeader-logo"></span> 
     <span class="AppHeader-text"></span> 
     <app-menu> 
        <!-- ... --> 
     </app-menu> 
    </div> 
</app-header> 

、AppHeaderクラスとラッパーdivapp-headerタグもあるので余計なことです。残念ながら、CSSクラスAppHeader（BEMに必要）はビューの基本要素（ビューファイルのtemplateタグ）に割り当てることはできないようです。

私は気付いていない、あるいはDOMを膨らませるビューの中に多くのラッパー要素があることを "良い"習慣（または少なくとも許容可能）と考えている方法がありますか？

Answer 1

私はちょうど実現し、自身（template）は実際に動作するカスタム要素にカスタムクラスを入れていること、

<template class="AppHeader"> 
    <span class="AppHeader-logo"></span> 
    <span class="AppHeader-text"></span> 
    <app-menu></app-menu> 
</template> 

---

編集/ Additiona：私は単にこのような何かを書くことができますl info

template要素がこのシナリオではレンダリングされず、router-view要素に置き換えられているため、ビューがルートの「基本ビュー」である場合、これは機能しません。

Answer 2

私は、現代のブラウザではさらに100の余分なDOMノードは問題ではないと信じていますが、それらを避けることが本当に重要な場合は、クラスの代わりにカスタムタグを試してみてください（https://en.bem.info/methodology/faq/#why-are-custom-tags-not-used-for-blocks-in-bemの制限リストを参照）。

Answer 3

おそらく@containerlessはあなたの問題を解決します：あなたのビューモデルで

：

@containerless 
export class AppHeader { 
    ... 
} 

このように、<app-header>コンテナはレンダリングされません。

コンポーネントが表示専用コンポーネントである場合、あなたは<template>タグでcontainerlessを宣言することができます。

<template containerless> 
    <div class="AppHeader"> 
     <span class="AppHeader-logo"></span> 
     <span class="AppHeader-text"></span> 
     <app-menu></app-menu> 
    </div> 
</template>