lit-element, lit-html

[renlite]

Hello,

What is the main difference between lit-element and UI5Element? Why did you decide to write yout own base class?

Why do you use handlebars as template and not lit-html direct? That seems to be an unnecessary build step.

[pskelin]

At the time started the project, LitElement was not even announced. UI5Element is similar to LitElement a thin wrapper for the custom element API provided by the browser so that repetition can be reduced when developing web components.

When LitElement was released, we did evaluate whether we should switch to it, but since we had to support IE11, we wanted to have tighter control to what can be optimized in the base class. In the end, the size of the base class is not something big that would benefit from reuse and we still encounter requirements that are best solved in the base class which would require a fork of LitElement if we had chosen it.

As for handlebars, there are two main reasons:

1. We wanted a declarative way to express what is rendered with as little logic as possible in the template. This way, all logic is forced to be represented as state in JS and when looking at a rendered component, it is trivial to know what the state was. lit-html gives a bit more freedom by allowing developers to write a lot of logic in the template if they are not careful. Handlebars enforces better separation of concerns.
2. Having a declarative renderer with a build step allows for generating other output formats when they come along without any code changes. For example, when something like Template Instaitiation becomes standard in the browser, we might switch to native rendering without having to change any of the developed components.

It is also worth mentioning that using handlebars is fully optional, as the component developer can write a lit-html template by hand and import it from the component (we used to have such a component when the templating didn't quite work, but then extended the templating for the necessary usage).

Finally, the renderer can also be substituted with any other renderer technology (like virtual dom) by returning a different renderer class for the element.
https://github.com/SAP/ui5-webcomponents/blob/bc78857efaeb17f632f69047555875780d9555c3/docs/dev/Developing%20Web%20Components.md#the-render-engine

Overall handlebars is fully optional and is the preferred choice for our development of the main and fiori packages, but in no way a prerequisite.

[renlite]

Thanks for your explanation.
I tried to call lit-html direct and to render the template without shadow DOM. But I didn't find a possibility in UI5Element. Something like the method CreateRenderRoot() in LitElement.
Is there an example how to import a lit-html template from a webcomponent which extends UI5Element?

[pskelin]

I created a small sample component that shows how to achieve this. You just need to return your lit-html template from the static template getter of the component.

https://codesandbox.io/s/ui5-webcomponents-forked-m785j?fontsize=14&hidenavigation=1&theme=dark&file=/src/LitButton.js:513-573

The template can live anywhere, I have created a module next to the component called LitButtonTemplate.js
https://codesandbox.io/s/ui5-webcomponents-forked-m785j?file=/src/LitButtonTemplate.js:235-277

it receives a context object with all the state of the component. You can import a standalone lit-html instance, but it's better to reuse the one coming from the framework.

I hope that helps.

[renlite]

Ok, thank you.
I didn't find a way to create an UI5WebComponent without shadowDOM.