How can I render html both in component element and out component element? #294

Activity

1. Scipion commented on Oct 29, 2022

   

   Scipion

   on Oct 29, 2022

   Contributor

   More actions

   I'm not sure of the question. Do you mean you want to wrap what the children of the tag into your button? if so you can get the initial content with this.innerHTML as a string and do it like so:

   @controller
   export class PrimaryButtonElement extends HTMLElement {
     connectedCallback(){
           const initialContent = this.innerHTML;
           const itemTemplate = (content:string) => {
              return html`<button>${content}???</button>`
           }
   
           this.innerHTML=''
           render(itemTemplate(initialContent), this);
      }
   }

   You will have to get rid of it and re-render it again.
   it will render:

   <primary-button data-catalyst="">
       <button>new issue???</button>
   </primary-button>

   I hope it helps.
2. qlfy17 commented on Oct 30, 2022

   

   qlfy17

   on Oct 30, 2022

   Author

   More actions

   I'm not sure of the question. Do you mean you want to wrap what the children of the tag into your button? if so you can get the initial content with this.innerHTML as a string and do it like so:

   @controller
   export class PrimaryButtonElement extends HTMLElement {
     connectedCallback(){
           const initialContent = this.innerHTML;
           const itemTemplate = (content:string) => {
              return html`<button>${content}???</button>`
           }
   
           this.innerHTML=''
           render(itemTemplate(initialContent), this);
      }
   }

   You will have to get rid of it and re-render it again. it will render:

   <primary-button data-catalyst="">
       <button>new issue???</button>
   </primary-button>
   

   I hope it helps.

   thanks a lot
3. qlfy17

   closed this as completedon Oct 30, 2022
4. github

   locked and limited conversation to collaborators on Oct 31, 2022
5. keithamus

   converted this issue into a discussion #296 on Oct 31, 2022