HTML5のスタイルカスタム要素

Question

私はAureliaプロジェクトを作成しています。自分のビューにカスタム要素を使用しています。私はそれが彼らが住んでいる範囲のためにカスタム要素を使用する方が良い習慣であることを読んだが、私はそれらを適切にスタイルする方法について疑問がある。

たとえば、カスタム要素を塗りつぶす背景色を取得するには、display:blockにする必要があります。これはたくさんの要素に対して行う必要があります。

div { 
 
    background-color:green; 
 
} 
 

 
div:first-child customelement { 
 
    display:block; 
 
} 
 

 
customelement { 
 
    background-color:blue; 
 
}

<div> 
 
    <customelement> 
 
    <h1>test</h1> 
 
    </customelement> 
 
</div> 
 

 
<div> 
 
    <customelement> 
 
    <h1>test</h1> 
 
    </customelement> 
 
</div>

すべてのカスタム要素のために、これが一般的なようにする簡単な方法はありますか？おそらく、存在しないHTML5要素をすべて対象とするSCSSメソッドですか？

Answer 1

デフォルトでHTMLカスタム要素は、spanに似たundefined elementと定義されています。ブラウザでこれまでに見たことがないundefined elementのように、デフォルトのユーザエージェントスタイリングはなく、継承された値が与えられ、ユーザエージェントスタイルシートがそれによってオーバーライドするときを除いて、すべての要素のデフォルトであるinline要素と見なされますW3Cが推奨するデフォルトに準拠しています。

あなたの唯一の選択肢は、実際にはCSSスタイルの先頭にあるすべての要素がレベル要素blockとして定義されていることです。

customelement, customelement2 { 
 
    display: block; 
 
} 
 
div { 
 
    background-color:green; 
 
} 
 

 
customelement { 
 
    background-color:blue; 
 
} 
 

 
customelement2 { 
 
    background-color: red; 
 
} 
 

<div> 
 
    <h1>Not Custom 
 
</div> 
 
<div> 
 
    <customelement> 
 
    <h1>Custom Element</h1> 
 
    </customelement> 
 
</div> 
 

 
<div> 
 
    <customelement2> 
 
    <h1>Custom Element 2</h1> 
 
    </customelement2> 
 
</div>

スクリプトがロードされているときは、第三段落に

をhere (W3C Custom elements)より、具体的にこのラインを読むことができ、img-viewer要素が類似し、未定義の要素として扱われますspanに