dynamic render

by alfredopacino

HTML

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

<style>
  div {
    padding: 5px;
    margin: 15px;
    border: 1px solid;
  }
</style>
<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

  class ParentElement extends LitElement {
  
  	constructor() {
        super();
        this.obj = {}
    }

    createRenderRoot() {
        return this;
    }

    static get properties() {
        return {
            obj: { type: Object }
        }
    }
    
    updated(changedProperties) {
    		if (changedProperties.has("obj")) { 
      		this.__iobj = {value: this.obj.value + 1}
         //this.requestUpdate();
      	}

    }
    changeObj() {
    	this.obj = {value: Math.round(Math.random()*100)}
    }

    firstUpdated() {
    	
    }
    
    renderChild() {
    	return html`<child-element .obj="${this.__iobj}"></child-element>`
    }

		
    render() {
      return html `
      <div>
      	i'm the parent component obj[${this.obj ? this.obj.value : null}]<br> <button @click="${this.changeObj}">changeObj</button>
      	<child-element .obj="${this.__iobj}"></child-element>
        _____<br>
        dynamic render
        ${this.renderChild()}
        
      </div>
      `;
    }  
  }
	
  customElements.define('parent-element', ParentElement);
</script>

<script type="module">
  import...