0

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?

Jim C
  • 3,957
  • 25
  • 85
  • 162
  • 1
    they don't promote it, they just use it. You don't need LIT if you want to develop vanilla web components. – Supersharp Jul 11 '19 at 22:55
  • 1
    Answering your questions. No it is not *forcing_ you to use a Framework and a Framework is not required. Alas Open-WC is on the Lit bandwagon... [the very first line in the first example starts with loading Lit](https://stackblitz.com/edit/open-wc-lit-demos?file=01-basic%2F01-basic-setup.js) and yes I agree with you that using Lit by default will likely make people think Lit == WebComponents. I say let them and have fun with [vanilla](https://chessly.github.io) and more [vanilla](https://card-ts.github.io/playingcardts/) – Danny '365CSI' Engelman Jul 12 '19 at 18:29
  • it seems my question was already answered but I can't set it as answered because both answered as comments – Jim C Jul 15 '19 at 18:38

1 Answers1

6

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!

passle
  • 146
  • 2
  • Certainly you answered my question. At this moment I am trying to use open-wc for testing a vanilla webcomponents which wasn't scaffolded by open-wc tool. Maybe you can answer my issue in https://stackoverflow.com/questions/57066106/typeerror-failed-to-resolve-module-specifier-open-wc-testing-relative-refer – Jim C Jul 17 '19 at 16:25
  • 2
    *"LitElement also reduces the boilerplate you have to write for vanilla web components."* This is exaclty why I urge beginners **not** to start with Lit. You do **not** learn how Custom Elements work, You learn how to use an opener **and** cook with a can of diced tomatoes. – Danny '365CSI' Engelman Jul 17 '19 at 18:56
  • 1
    @Danny'365CSI'Engelman Yeah let's all start web development using assembly. Why all of this Javascript fluff when you can write machine code? – Merc Mar 11 '20 at 22:14
  • Point is native JS will forever be supported. Lit, Hybrids, HyperHTML, whatever-sugar solution.. there is no clear winner yet. I have seen companies go bust because they chose Mootools over jQuery 10+ years ago. So my advice is to learn the technology first, then look for tooling that speeds up your development, not the other way around. – Danny '365CSI' Engelman Mar 12 '20 at 09:10