I am currently in the process of developing a web component using LitElement. You can find more information about this on this page
// To start, import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';
// Next, extend the LitElement base class
class MyComponent extends LitElement {
/**
* Add your template within the `render` method to define the structure of your element.
*
* Remember that every element using LitElement as its base class must provide an implementation of the `render` method.
*/
render(){
/**
* The `render` method is expected to return a lit-html `TemplateResult`.
*
* Use the `html` helper function to tag a JavaScript template literal:
*/
return html`
<!-- Your template content goes here -->
<p>A sample paragraph</p>
`;
}
}
// Lastly, register the new element with the browser.
customElements.define('my-component', MyComponent);
Is it possible to develop a LitElement without incorporating Shadow DOM?
I am interested in creating it without #shadow-root appearing like demonstrated in this image:
https://i.sstatic.net/hjAWn.png