Search code examples
polymerweb-componentlit-htmlnative-web-componenthtml-templates

why does open-wc scaffold promotes lit-html


I have worked around one year with Polymer 1 and 2 in a big company with large webcomponents catalog and I am confident webcomponents can be very usefull. I am aware about "cons ideas" like https://adamsilver.io/articles/the-problem-with-web-components/.

Now I am studding deepely how to efficiently use vanilla webcomponents. I just started with the premisse that using vanilla web-components will help to be a aligned with webcomponents improvement (I can't defend such idea - I just assume this for now). Then I am trying to create an stack for working with vanilla webcomponents.

Searching for a recommended approach for testing I reached https://open-wc.org/testing and I assume it is aimed to promote good practices without adds to specific framework (from its site: "Open Web Components is a community-effort, independent of any framework or company"). It is exactly what I am looking for: a kind of good pratices and well-known recommendation similar as we have for microservice from micorservice.io (this is just an analogy).

Trying it scaffold I got in package.json:

  "dependencies": {
    "lit-html": "^1.0.0",
    "lit-element": "^2.0.1"
  }

So, my main question is: why lit-html for a webcomponent?

Usefull doubts surrounding my main question, as far as I know lit-html is a framework sponsored by google and polymer team. Isn't that somehow forcing me to use polifylls to run in all browsers? Assuming I don't care about browsers not compliance with webcomponents, why would I need a framework?


Solution

  • Maintainer of open-wc here :)

    The reason we recommend lit-html/element is because they are very small libraries that help you write web components, and dont lock you in to a framework. Down the line, LitElement simply extends HTMLElement, which makes it interoperable with other web components and even frameworks. LitElement also reduces the boilerplate you have to write for vanilla web components. We’re not married to it however, and personally I really enjoy vanilla component solutions. Also, most (if not all) of our tools should be compatible with web components.

    Regarding polyfills; LitElement will attempt to use modern standards is possible (eg: constructable stylesheets), and use a fallback if not available. Loading the web components polyfills is up to the developer - not litelement. If you use our build configurations for rollup or webpack, you can opt in to having the polyfills loaded.

    Hope that answers your questions, feel free to reach out!