仕様なのか Chrome (64) が未実装なのかは知らない
「extends HTMLInputElement」 で定義はできるけど要素作る時の super() で親コンストラクタ呼び出すときにエラーになる
仕方ないから HTMLElement を継承して shadowRoot の内側に input などを置いて継承じゃなくラッパーにする
でもこれだと value などのプロパティが input に対応してない
Proxy を使って全部のプロパティを内側の要素にプロキシさせられれば簡単だけど CustomElement では使えない
constructor で Proxy オブジェクトを return するとエラー
getter/setter を全部書いていくのは大変だからプロパティリストだけ指定して自動で生成するようにした
[main.html]
<!doctype html>
<link rel="import" href="a-b.html"/>
<a-b id="ab"></a-b>
<script>
document.querySelector("#ab").value = "text"
</script>
[a-b.html]
<template id="tpl">
<textarea id="main"></textarea>
</template>
<script>
customElements.define("a-b", class extends HTMLElement {
constructor(){
super()
const tpl = document.currentScript.ownerDocument.querySelector("#tpl").content
this.attachShadow({mode: "open"}).append(tpl.cloneNode(true))
const target = this.shadowRoot.querySelector("#main")
bridge(this, target, ["value", "disabled"])
}
})
function bridge(from, to, properties){
for(const key of properties){
Object.defineProperty(from, key, {
get(){
return to[key]
},
set(value){
to[key] = value
}
})
}
}
</script>
textarea を継承(ラップ)した a-b タグ
value と disabled は中の textarea を変更できる
