Menu

React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

ShadyCSS support lands in ES6 templating library lit-html

Starting from version 3.0 the Polymer Web Components utilities will standardize on JavaScript best practises. One of the areas is templating, where Polymer is set to leverage native ES6 template literals.

Templating in JavaScript remains a volatile space. There are multiple classic templating syntaxes like Nunjucks and Handlebars as well as framework specific languages for Vue.js and Angular. In the PHP community, for example many projects like Drupal on the Twig templating language. It's more uniform

The React.js community has settled on the JSX format for component templating. JSX is essentially JavaScript mixed with HTML tags that is compiled to pure JavaScript. This is an approach loved by many and together with Virtual DOM (vDOM) implementations it provides impressive performance.

lit-html leverages native ES6 template literals

The lit-html project originating from the Google's Polymer Team is a library that takes JavaScript templating to the next level. It utilises the native ES6 template literals for high performance templating and a syntax that is immediately familiar to devs used to writing JSX.

how lit-html works vs. vDOM in ReactAs the launch date of Polymer 3.0 inches closer the Polymer crew is working hard on all aspects of the next major leap for Web Components. Native Web Components support is already live in Billions of devices.

But there is still a need for polyfills. In fact there will be a need for sometime because of technical SEO for Web Components.

With the launch of lit-html 0.9 comes another significant polyfill for in the form of ShadyCSS support. The ShadyCSS library provides simulation of ShadowDOM style encapsulation. This will allow global and scoped CSS to work within lit-html templates. Together with the performance improvements over vDOM implementations this is a good alternative to React Styled Components.

In addition this fundamental feature there are other flexibility improvements like the ability mix different template dialects in across templates. In addition a major bug fix is the directive support for attribute and property bindings.

Written by Jorgé on Friday February 2, 2018

Permalink - Tags: javascript, webcomponents, lithtml

« VS Code to autocomplete JavaScript class 'this' properties automatically - Next.js 5.0 supports TypeScript, adds Universal Webpack, etc. »