KotlinのhtmlフレームワークでWebコンポーネントタグを表現する方法は？

Question

コトルには、kotlinxのようにhtmlを表すためのフレームワークがあります。どのようにしてこのようなフレームワークでWebコンポーネントタグを表現できますか？たとえば、ポリマーコンポーネントを使用したい場合、すべてのポリマーコンポーネントを含めるようにこれらのフレームワークを拡張する必要がありますか？

Answer 1

：https://github.com/Kotlin/kotlinx.html/tree/master/generate

リソースフォルダ内HTML5のソースXSDファイルもあります。 divs内で使用するdicom-editorというタグの場合：上記の例で

class DicomEditor(consumer: TagConsumer<*>) : 
     HTMLTag("dicom-editor", consumer, emptyMap(), 
       inlineTag = true, 
       emptyTag = false), 
     HtmlInlineTag {} 

fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) { 
    DicomEditor(consumer).visit(block) 
} 
... 
div{ 
    dicom_editor { 
     onMouseDownFunction = {_ -> 
      window.alert("Dicom Editor") 
     } 
    } 
} 

、dicom_editorコールは、マウスダウンイベントのコールバックを含みます。あなたはまた、atributesを追加することができます。attributes["data-toggle"] = "dropdown"

あなたはフィールドなどの属性を追加することができます：

class DicomEditor(consumer: TagConsumer<*>) : 
     HTMLTag("dicom-editor", consumer, emptyMap(), 
       inlineTag = true, 
       emptyTag = false), 
     HtmlInlineTag { 
      var data_toggle: String = "" 
       set(x) {attributes["data-toggle"] = x} 
     } 

fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) { 
    DicomEditor(consumer).visit(block) 
} 
... 
div{ 
    dicom_editor { 
     data_toggle = "dropdown" 
    } 
} 

をKotlinコードでは、-の代わりに_を使用するために持っているか、エラーが発生します。

Answer 2

コンポーネントのXSDファイルを作成し、自動的に生成することができます。それはちょうどkotlinxがそれをする方法です。

ジェネレータはプロジェクトの一部です。ここでそれをチェックアウト：あなたはCustomize Kotlinx（Custom Tagを作成する）ことができます https://github.com/Kotlin/kotlinx.html/blob/master/generate/src/main/resources/html_5.xsd