@@ -32,6 +32,7 @@ const [hidden, setHidden] = manageState('hidden', false);
3232const [ open , setOpen ] = manageState ( 'open' , false ) ;
3333const [ fill , setFill ] = manageState ( 'fill' , '#ff0000' ) ;
3434const [ bg , setBg ] = manageState ( 'bg' , 'inherit' ) ;
35+ const [ content , setContent ] = manageState ( 'content' , 'Bacon Ipsum' ) ;
3536const iter = Iterator . range ( list . at ( - 1 ) + 1 , Infinity ) ;
3637const pushItem = registerCallback ( 'push:item' , ( ) => setList ( list . concat ( iter . next ( ) . value ) ) ) ;
3738registerCallback ( 'state:fill:set' , ( ) => setFill ( `#${ crypto . getRandomValues ( new Uint8Array ( 3 ) ) . toHex ( ) } ` ) ) ;
@@ -106,6 +107,7 @@ class StatefulElemenet extends AegisComponent {
106107 }
107108}
108109document . body . append ( html `
110+ < button type ="button " popovertarget ="popover " popovertargetaction ="show "> Show Popover</ button >
109111 < p ${ stateKey } ="msg" ${ statePropertyAttr } ="innerHTML"> ${ msg } </ p >
110112 < button type ="button " ${ onClick } ="${ ( ) => setHidden ( ( state = hidden . valueOf ( ) ) => ! state ) } " class="btn btn-system-accent"> Toggle</ button >
111113 < button type ="button " ${ onClick } ="${ ( ) => setOpen ( true ) } " class="btn btn-system-accent"> Show Modal</ button >
@@ -141,17 +143,34 @@ document.body.append(html`
141143 </ dialog >
142144` ) ;
143145
146+ const popover = html `
147+ < div popover ="auto " id ="popover ">
148+ < template shadowrootmode ="open ">
149+ < button type ="button " popovertarget ="popover " popovertargetaction ="hide " part ="button "> Close</ button >
150+ < div part ="content ">
151+ < slot name ="content "> No Content</ slot >
152+ </ div >
153+ < p contenteditable ="true " ${ onInput } ="${ ( { target } ) => setContent ( target . textContent ) } "> ${ content } </ p >
154+ </ template >
155+ < p ${ stateKeyAttribute } ="content" slot="content"> ${ content } </ p >
156+ </ div >
157+ ` ;
158+
144159const dialog = document . getElementById ( 'test-dialog' ) ;
145160StatefulElemenet . register ( 'stateful-el' ) ;
146161document . body . dataset [ stateKey ] = 'bg' ;
147162document . body . dataset [ stateStyle ] = 'background-color' ;
148163watchState ( ) ;
149164observeEvents ( document . documentElement ) ;
150165observeDOMState ( document . documentElement ) ;
166+ observeEvents ( popover . firstElementChild . shadowRoot ) ;
167+ observeDOMState ( popover . firstChild . shadowRoot ) ;
151168bindState ( '#root' , 'hidden' , { attr : 'hidden' } ) ;
152169bindState ( '#img-result' , 'file' , { attr : 'src' } ) ;
153170createStateHandler ( '#test-dialog' , 'open' , ( open , dialog ) => open ? dialog . showModal ( ) : dialog . close ( ) ) ;
171+ // popover.firstElementChild.shadowRoot.adoptedStyleSheets =
154172
173+ document . body . append ( popover ) ;
155174if ( open . valueOf ( ) ) {
156175 dialog . showModal ( ) ;
157176}
0 commit comments