save_restore_custom_elements_sample.html (1085B)
1 <script> 2 class CEBase extends HTMLElement { 3 static formAssociated = true; 4 constructor() { 5 super(); 6 this.internals = this.attachInternals(); 7 this.state_ = undefined; 8 } 9 formStateRestoreCallback(state, reason) { 10 if (reason == "restore") { 11 this.state_ = state; 12 } 13 } 14 set(state, value) { 15 this.state_ = state; 16 this.value_ = value; 17 this.internals.setFormValue(value, state); 18 } 19 get state() { 20 return this.state_; 21 } 22 get value() { 23 return this.value_; 24 } 25 } 26 27 customElements.define("c-e", class extends CEBase {}); 28 </script> 29 <form> 30 <c-e id="custom0"></c-e> 31 <c-e id="custom1"></c-e> 32 <c-e id="custom2"></c-e> 33 <c-e id="custom3"></c-e> 34 <c-e id="custom4"></c-e> 35 <upgraded-ce id="upgraded0"></upgraded-ce> 36 <upgraded-ce id="upgraded1"></upgraded-ce> 37 <upgraded-ce id="upgraded2"></upgraded-ce> 38 <upgraded-ce id="upgraded3"></upgraded-ce> 39 <upgraded-ce id="upgraded4"></upgraded-ce> 40 </form> 41 <script> 42 customElements.define("upgraded-ce", class extends CEBase {}); 43 </script>