javascript - Access DOM when using hyper.Component -


when using hyperhtmlelement it's possible access contents of component using this.children or this.queryselector(), since it's element.

but how achieve similar behavior when using hyper.component?

the hypothetical example have in mind react docs: https://facebook.github.io/react/docs/refs-and-the-dom.html - i'd focus specific node inside dom.

i have codepen sandbox i'm trying solve this: https://codepen.io/asapach/pen/ogvdbd?editors=0010

the idea render() returns same node every time, save before returning , access later this.node:

render() {   this.node = this.html`     <div>       <input type="text" />       <input type="button" value="focus text input" onclick=${this} />     </div>   `;   return this.node; } 

but doesn't clean me. there better way this?

the handleevent pattern there you. idea behind pattern never need retain dom references when behavior event-driven, 'cause can retrieve nodes via event.currenttarget, pointing @ element had listener attached, or event.target, suitable clicks happened in other places within generic click handler attached wrap element, in demo case div one.

if you'd use these information, can enrich components using attribute recognize them, data-is="custom-text-input" on root element be, , reach other thing need.

onclick(e) {   var node = e.target.closest('[data-is=custom-text-input]');   node.queryselector('[type=text]').focus(); } 

you can see working example in fork of code pen: https://codepen.io/webreflection/pen/rlnyjy?editors=0010

as alternative, render component , address content once shown in other fork: https://codepen.io/webreflection/pen/lzemgo?editors=0010

  constructor() {     super().node = this.render();     } 

at end of day, if not using custom elements basic, good'ol dom nodes, can initialize / render them whenever want, don't need wait upgrade mechanism.

what both nice , secure here, there's no way, unless explicitly expose it, address/change/mutate instance related dom element.

i hope these possibilities answered question.


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -