カスタムタグ 両方ともh5が持っていないタグを作成します。
例えば <mine-element scale="1"></mine-element>
このタグはh5タグのclass/idを継承し、独自の属性を持ちます。
| class | Basic Propertiesクラス名の定義 | 文字列 |
| id | Basic PropertiesDefinition id | 文字列 |
| color | カスタム属性 ￤要素の色の定義 | rgba/16 ^ |
| ..... |
では、これらのタグの1つを実装してみましょう。
fitstはhtmlファイルを作成し、jsで次のようにします。
- カスタムタグの登録
customElements.define('mine-element', mineElement, {extends: 'div'})
この要素は mine-elment と呼ばれ、クラスオブジェクトは mineElement で、div 要素を継承しています。 - mineElementの定義
class mineElement extends HTMLElement{
constructor(){
super(); //superを最初に実行しなければならない。そうしないと、この後の thisが無効になってしまう。
let ucolor = this.getAttribute("ucolor") || "";
this.style.cssText = "color:"+ucolor+""
}
}
- htmlへのタグの追加
<mine-element ucolor="red"></mine-element> customElements.define('mine-element', mineElement, {extends: 'div'})このステートメントは、mineElementが定義された後に実行されることに注意してください！
