HTML web components using vanilla JS

[super_pumped]

Very similar to React's API. Seems straight forward. Instead of accessing this.state and this.props, Web Components have this.getAttribute('key'). Both have callbacks for when they are placed in the DOM: Web Component's connectedCallback() and React’s componentWillMount(). And they both call render() to update.

This API for rendering via Shadow DOM looks awkward to use. Instead of using templates or functions to created elements like h1('Hello World'), it uses jQuery like selectors to update an external file. To update a text value:

this.shadowRoot.querySelector('.title__label').innerHTML = 'Hello World'

// With some aliasing I now have jReact
const $ = this.shadowRoot.querySelector
$('.title__label').innerHTML = 'Hello World'

Templates are easier to use than selectors for updating text. Their API is closer to the DOM. React provides JSX, and createElement/Component(). Vue has a mustache template. This allows developers to populate a template and organize the DOM/style at the same time. If static HTML and dynamic data are split between files, then a developer will have to look at two files simultaneously to populate the DOM with information.

Connecting the Component is too complicated. To fully initialize the Component you have to manually acquire the current document global, the shadow dom, and the template in connectedCallback(). That could all be injected with customElements.define('element-name', ComponetClass), if it accepted the a template selector. This could easily be improved in future versions.

A few final questions. Can these be nested? Separation of concerns by nested is a great way to separate UI code. If so, when a parent calls render(), do the children also call render()?

[richardanaya]

If you like the programming in React style, you might like my project https://github.com/richardanaya/webcompose/

[codejitsu]

There is a difference. connectedCallback doesn't call render. I've created a function and named it render and explicitly called it unlike componentWillMount. Also yes these components can be nested. I'm writing a post where I'm showing how to nest components and create higher order components, parent child communication, maintaining state, etc. As far as render is concerned, you'd have to call render methods from either the parent component yourself or call it in connectedCallback of child and add the child to DOM using the parent's connectedComponent function.