| <!DOCTYPE html> |
| <body> |
| <script> |
| class MyControl1 extends HTMLElement { |
| static get formAssociated() { return true; } |
| constructor() { |
| super(); |
| this.internals_ = this.attachInternals(); |
| this.value_ = 'initial'; |
| } |
| get value() { |
| return this.value_; |
| } |
| set value(v) { |
| this.value_ = v; |
| this.internals_.setFormValue(v); |
| } |
| restoreValueCallback(v, mode) { |
| this.value = v; |
| this.lastRestoreMode = mode; |
| } |
| } |
| customElements.define('my-control-1', MyControl1); |
| </script> |
| <input id=emptyOnFirstVisit name="state"> |
| |
| <form action="../../resources/back.html" id="form1"> |
| <my-control-1></my-control-1> |
| <my-control-2></my-control-2> |
| </form> |
| |
| <script> |
| |
| let $ = document.querySelector.bind(document); |
| |
| function upgradeMyControl2() { |
| class MyControl2 extends HTMLElement { |
| static get formAssociated() { return true; } |
| constructor() { |
| super(); |
| this.internals_ = this.attachInternals(); |
| this.value_ = 'initial'; |
| } |
| get value() { |
| return this.value_; |
| } |
| set value(v) { |
| this.value_ = v; |
| this.internals_.setFormValue(v); |
| } |
| restoreValueCallback(v, mode) { |
| this.value = v; |
| this.lastRestoreMode = mode; |
| } |
| } |
| customElements.define('my-control-2', MyControl2); |
| customElements.upgrade($('my-control-2')); |
| } |
| |
| function runTest() { |
| let state = $('#emptyOnFirstVisit'); |
| if (!state.value) { |
| // First visit |
| state.value = 'visited'; |
| upgradeMyControl2(); |
| |
| $('my-control-1').value = 'edit1'; |
| $('my-control-2').value = 'edit2'; |
| setTimeout(() => { $('form').submit(); }, 100); |
| } else { |
| // Second visit |
| upgradeMyControl2(); |
| parent.doneTest(); |
| } |
| } |
| runTest(); |
| </script> |
| </body> |
