open-wc how to use web components in a legacy application - web-component

Question

I had a look at the open-wc generator. I can generate web component libraries and web component application but the generated README file and the documentation does not contain a description how to import a web component library into another library or into an application so that the library or application can use the dependency as a web component. Is there a sample but non trivial application build with open-wc that I can use to learn from?
My primary interest is to import several web component into a legacy application that does not use npm and rollup by itself. What would be the best way to do that?
What I have tried to do. I have created a library litelement-demo by running
npm init #open-wc
and I have created an application in the similar way. I have opted for using typescript in both cases. The README.md of libelement-demo states that it can be used in this way:
<script type="module">
import 'litelement-demo/litelement-demo.js';
</script>
<litelement-demo></litelement-demo>
I have added this snippet to the application's index.html and run
npm i --save ../litelement-demo
npm run build
but the 2nd command fails with the error message
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
litelement-demo/litelement-demo.js (imported by inline-module-index-1.js)
The link in the error message does not help and neither the open webcomponent documentation nor the generated README.md files.

Answer 1

Typical web component is basically a class as follows:
// You can also use some external library and inherit from its base class.
// For example: LitElement
class BasicSetup extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
// Template/DOM generation
}
// One or more methods...
}
// Registration
customElements.define('basic-setup', BasicSetup);
Have a look at a registration statement. Simply add this file in your HTML scripts section and you are done. You do not have to integrate with any existing library or solution. Wherever, you have HTML, you can simply use it as
<div>
<p>My Awesome web component</p>
<basic-setup></basic-setup>
</div>
You can also initialize the element with JavaScript using customElements.get(name) method if you do not have access to BasicSetup class reference.
// Get reference to basic-setup class assuming it is already registred.
const ClassRef = customElements.get('basic-setup');
// Initialize using constructor
const myCustomElm = new ClassRef();
// or use document.createElement
const myCustomElm = document.createElement('basic-setup');
document.body.appendChild(myCustomElm);

Answer 2

Since your legacy application doesn't use npm, you don't need to do anything with it an npm.
Just add in the head
<script type="module">
import 'litelement-demo/litelement-demo.js';
</script>
and then use
<litelement-demo></litelement-demo>
somewhere in your html. Nothing else needed to start working