2017-12-14 39 views
1

私はこれを確認していますAngular 5 forms youtube tutorialとセバスチャンは最初にapp-form01という名前のフォームセレクタを持っていますが、彼はapp-部分を削除します。 IIUCのカスタム要素には-が含まれています。これはリラックスしていますか?角度5のコンポーネントはセレクタで `-`を必要としますか?

+0

いいえ、ルールは緩和されていません。しかし、Angularはおそらくルールによって再生されていません。そのコンポーネントのスタイルには問題はないかもしれません。 https://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name – Intervalia

答えて

2

あなたは-分離言葉なしで、あなたのタグを持つことができ、角度はあなたの言葉が結合されているか分からないだろう、それはそれのためのちょうど別の識別子です:

<app-my-tag> - することができます、また><appmytag>

完全に全体の接頭辞を省略:

<app-my-tag> - ><mytag>

しかし、セパレータを使用しないと、タグが読みにくくなり、カスタムタグに接頭辞を使用しないと名前の衝突の可能性が高くなります。

+0

ウェブコンポーネントの命名規則に従っているので、 '-'ダッシュの使用に慣れているかもしれません。また、Angularのネイティブコンポーネントに移動した場合は、ダッシュを使用する必要があります。 – Intervalia

5

-はまったく必要ありません。これは、カスタム要素の要件に準拠しているため、優れた方法です。 コンポーネントの動作は、-の有無とまったく同じであり、大文字と小文字が混在した名前を使用することもできます。

たちは要素セレクタが原因custom element specの をdasherizedままkebab-case removal中にも

参照してください。ダッシュは、私たちも、テンプレートがより高い忠実度で 断片(ただし、有効なHTML5まま 角度テンプレートの大文字と小文字を区別を行った後以来、指導のために使用 カスタム要素の仕様によって必要とされるため、

コンポーネント名がダッシュケースに入れたまま

大文字と小文字を区別すると、 のhtmlパーサーしか見ることができません)。

非常に少数の人々は、カスタム要素の仕様と ダッシュが私たちを与える保証について知っているので、私は すべてのディレクティブ/コンポーネント要素セレクタは、その中に、少なくとも単一のダッシュ を持っていることを強制する方が良いだろうと思います。 コンポーネント/ディレクティブのメタデータのフラグを使用してオプトアウトする方法がありますが、デフォルトではオンにするべきではありません。

誰かがカスタム要素仕様に不慣れな場合は、要素名にダッシュを追加 の利点は以下のとおりです。

  • 要素は、カスタム要素になり - DOMノードのタイプではなく、 のHTMLElementです
  • HTMLUnknownElement
  • の場合には、我々はそれを必要とする、我々は
  • document.registerElement経由スペック保証、偽の要素を登録することにより、 :unresolved psedo-classから 利点はブラウザが012することができ名前にダッシュを含むネイティブエレメントを導入しません。つまり、ブラウザでネイティブにAngular Componentセレクタに一致する 要素を実装すると、今後アプリが破損することはありません(例: )。 )

さらに詳しい情報custom elements

関連する問題