您如何像DIV一樣設置自定義元素的樣式？

Question

我正在尋找一種一致的跨瀏覽器解決方案，以對DIV等自定義元素進行樣式設置。 （即：重置為DIV樣式作為起點）。 Chrome似乎將自定義元素視為span 。

這是我使用自定義元素的目的：

• 對於Restrict: E角度指令。
• 作為指令模板的一部分，我可以從指令的鏈接或控制器函數中使用element.find('custom-element')選擇一個子元素。 在構建需要計算子元素尺寸和/或位置的指令時，有時需要這樣做。

它是這么簡單這樣做 ：

custom-element {
  display: block;
}

還是在處理某些瀏覽器時應該注意的陷阱？

Answer 1

從事HTML標准工作的人員強烈建議不要使用自定義標簽。 IE8和更低版本的Internet Explorer默認情況下不支持未知標簽，解決方案是添加腳本來創建元素。

<!--[if lt IE 9]>
   <script>
      document.createElement('custom-element');
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->

HTML5指定未知標記對於瀏覽器而言不是錯誤的，但它們是針對代碼檢查器的。 瀏覽器應允許它們使用CSS樣式，就像瀏覽器熟悉的標簽一樣，默認情況下，它們是內聯元素而不是塊。

這樣做的目的不是每個人都創建自己的標簽集，這會引起混亂，而是允許在不破壞舊系統的情況下在將來創建新標簽。

完全違反HTML5標准的行為將被視為完全違反行為，並被用來考慮如何在無法使用標准完成某些事情時改進該標准。

為了使用標准完成您要完成的任務，他們添加了數據屬性和自定義屬性http://html5doctor.com/html5-custom-data-attributes/ ...

<div customElement="true"></div>

document.querySelectorAll('[customElement]'); 

...這就是人們希望您使用的html5標准。

注意customElement =“ true”是一種常見的故意違規行為