Web components are great right?

You get easily shareable custom elements that neatly encapsulate your code and can isolate your CSS via shadow DOM, this is all free in modern browsers. The API with connected and attribute change callbacks is easy to understand. Well tested polyfills are available...

But

How do I pass complex objects into my custom elements?

<script type="text/javascript">
  class HelloElement extends HTMLElement {
    static get observedAttributes() {return ['name']; }
    attributeChangedCallback(attr, oldValue, newValue) {
      if (attr == 'name') {
        console.log(this.myObj);
        this.textContent = `Hello, ${newValue}`;
      }
    }
  }
  customElements.define('hello-element', HelloElement);
</script>

<hello-element name="Anita"></hello-element>

<script type="text/javascript">
setTimeout(function() {
  let he = document.querySelector('hello-element');
  he.myObj = { myArr:[1,2,3,4,5]}
  he.setAttribute('name','Aaron');
},1000)
</script>

Geez

Manually triggering rerender is too much work

Web components are great right? You get easily shareable custom elements that neatly encapsulate your code and can isolate your CSS via shadow DOM, this is all free in modern browsers. The API with connected and attribute change callbacks is easy to understand. Well tested polyfills are available...

Web components are great right?

But

Geez

Use a tiny component automatic re-rendering library like

https://github.com/mikeal/rza

But

hyperHTML

lit-html

But

Use polymer

But

The arc.codes aws lambda management tool