Lit-Html (Web components) Support/Workaround

[ceds]

I have a website that was built using Lit-Html and wondering if it's possible to something like this using Syncfusion Javascript and Webpack.  This obviously does not work but just wondering if something like this is possible.

Currently I have to initialize the class and then append it to a JS element which makes it difficult to building dynamic websites using Lit-Html.

import { html, LitElement } from 'lit';

import { Grid, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-grids';

const ejGrid = (data) => html`

    <div>

        <h1>Orders</h1>

        ${data.length > 0 ?

            html`

                <ej-grid .dataSource=${data}>

                    <e-columns>

                        ${Object.keys(data[0]).map(column => html`

                            <e-column field="${column}" headerText="${column}" width="120"></e-column>

                        `)}

                    </e-columns>

                </ej-grid>

            `

        : html`

            <span>No data available</span>

        `}

    </div>

`;

const griddata = [

    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, OrderDate: '1996-07-04' },

    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, OrderDate: '1996-07-05' }

];

export default class ExampleGrid extends LitElement {

render() {

       

        return html`

           

            ${ejGrid(griddata)}

        `;

  }

}

[Farveen Sulthana Thameeztheen Basha]

Hi Team,

Greetings from Syncfusion

Before proceed this, we request you to share more information about your requirement. Kindly share the information below.

• Please confirm whether you are using Essential JS1 or JS2?

• In your shared code you have imported JS2 module directives and used JS1 Grid? So better clarification refer documentation and demo shared for your use case.

In addition to that, we also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive. This new-generation data grid control offers several benefits over our existing EJ1 Grid control like better performance, touch friendliness, light weight, and much more. JS2 DataGrid offers 2–3x improved performance in many scenarios.   

     

We suggest you look into our following product page for more details.    

https://www.syncfusion.com/angular-components/angular-grid

https://ej2.syncfusion.com/angular/demos/#/material3/grid/over-view

Based on your confirmation, we would guide you in right way.

Regards,
Farveen sulthana T

[ceds]

Hi Farveen,

Yes, I'm aware of ej2.  I'm currently using it.  My question is rather simple, I think I confused you with the "example" that was just dummy code.  I want to know if ej2 can be used as a Web Component without having to declare the class and inject the control into a DOM object.  My understanding is I need to create my own "wrapper" to use Syncfusion ej2 as a Web Component ?

[Aishwarya Rameshbabu]

Hi,

Upon reviewing your website, we could see that you want to use the EJ2 Grid component as a web component. Considering the limitations and popularity, we currently do not provide web components. Also, while web components offer certain advantages, it's essential to note that they face challenges in terms of performance, encapsulation, and reactivity compared to more specialized frameworks and may not seamlessly align with the rich functionality and integration capabilities offered by our controls in their current design.

We have listed a few of the community drawbacks of the web components with suitable articles.

Increased Complexity:

Web components introduce a new layer of complexity to your codebase, which can make it more difficult to understand and maintain. They can also look complex and clunky, especially when you’re missing features such as databinding and state management. Click here to read the article.

Performance overhead:

Rendering custom elements can sometimes be slower than rendering native HTML elements. Replicating existing HTML tags with web components is not recommended, as it introduces unnecessary JavaScript rendering for basic elements that are already natively supported. Click here to read the article.

Accessibility challenges:

Web components, being custom elements with encapsulated functionality, introduce complexities in terms of accessibility compared to using standard HTML elements or more established frameworks.

SSR:

Using SSR in combination with Web Components is practically difficult or impossible to use. Web Components rely on browser-specific DOM APIs that are unavailable on the server. Click here to read the article.

Also, we have future plans to provide web components. However, considering the current drawbacks and limitations, we have not yet implemented this feature. We aim to incorporate web components once they overcome the drawbacks and gain increased popularity within the developer community.

Regards

Aishwarya R