I have successfully created a compact lit element bundle file using rollup.config.js. This bundle file has been uploaded to Netstorage, and here is how my lit element is structured:
import {customElement} from "lit/decorators.js";
import {LitElement} from "lit";
@customElement('my-lit-element')
export class MyLitElement extends LitElement {
constructor() {
super();
console.log('this is test log');
}
/**
* invoked when a component is added to the document's DOM
*/
connectedCallback() {
super.connectedCallback();
}
testMethod() {
console.log('Hi from testMethod()');
}
}
declare global {
interface HTMLElementTagNameMap {
'my-lit-element': MyLitElement;
}
}
This is the content of my rollup.config.json:
import merge from 'deepmerge';
import { createSpaConfig } from '@open-wc/building-rollup';
import json from "@rollup/plugin-json"
// import copy from 'rollup-plugin-copy'
import pkg from './package.json'
const baseConfig = createSpaConfig({
developmentMode: process.env.ROLLUP_WATCH === 'true',
injectServiceWorker: false
});
export default merge(baseConfig, {
// any <script type="module"> inside will be bundled by rollup
input: './index.html',
plugins: [
// ... other rollup plugins
json()
]
});
I would like to access the testMethod() function within a typescript file in Angular. I tried accessing the function in an html file which worked as shown below:
<script type="module" src="https:path_to_my-lit-element-cdn_bundleFile.js"></script>
<my-lit-element></my-lit-element>
<script>
const el = document.querySelector('my-lit-element');
const ob = customElements.whenDefined('my-lit-element').then(() => {
//works
el.testMethod()
}
});
However, I am looking to achieve the same functionality in a typescript file.
I attempted to access it directly like this:
In index.html:
And in the typescript file, I tried to access the testMethod() in a similar manner:
const el = document.querySelector('my-lit-element');
const ob = customElements.whenDefined('my-lit-element').then(() => {
//works
el.testMethod()
}
});
Unfortunately, it does not work. Whenever I try to use el.testMethod(), it starts displaying an error message:
Property 'testMethod' does not exist on type 'Element'.
If anyone knows how to call methods within a cdn JavaScript file from a typescript file, your help would be greatly appreciated.