HTML5'teki stil özel öğeler

Question

Bir Aurelia projesi oluşturuyorum ve görünümlerim için özel öğeleri kullanıyorum. İçinde yaşadıkları alan nedeniyle özel öğeleri kullanmanın daha iyi bir uygulama olduğunu okudum, ancak bunları düzgün bir şekilde nasıl şekillendireceğime dair şüphelerim var.

Örneğin, özel öğeyi doldurmak için arka plan rengini almak için display:block yapmam gerekiyor. Bunun bir çok eleman için yapılması gerekiyor.

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>

tüm özel elementler için bu jenerik hale getirmek için basit bir yolu var mı ? Mevcut olmayan her bir HTML5 öğesini hedeflemek için herhangi bir SCSS yöntemi olabilir mi?

Answer 1

Varsayılan olarak HTML Özel Öğeleri, span benzeri bir undefined element olarak tanımlanmıştır. Tarayıcının daha önce hiç görmediği bir undefined element olarak, varsayılan kullanıcı aracısı stiline sahip değildir ve devralınan değerler verilecektir ve bir kullanıcı aracısı stil sayfasının kullanıcı tarafından geçersiz kılınmasından başka tüm öğeler için varsayılan olan inline öğesi olarak görülecektir. W3C Önerilen varsayılanlarla uyumludur.

Tek seçeneğiniz, block düzey öğesi olarak tanımlanan CSS stilinizin en üstündeki tüm öğelere gerçekten sahip olmaktır.

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>

Sen here (W3C Custom elements) daha okuyabilir ve komut yüklenirken, img-viewer eleman tanımlanmamış bir unsur olarak ele alınacaktır 3 paragrafta

bu hat, benzer özellikle span.