英文:
lit element CDN rollup bundle file: accessing a function contained in the cdn bundle file from an external jsp file
问题
I've translated the provided content. Here is the translation:
我已经使用rollup.config.js创建了一个简单的lit元素捆绑文件。此捆绑文件已上传到Netstorage。这是我的lit元素的样子：
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');
}
/**
* 当组件添加到文档的DOM中时调用
*/
connectedCallback() {
super.connectedCallback();
}
testMethod() {
console.log('Hi from testMethod()');
}
}
declare global {
interface HTMLElementTagNameMap {
'my-lit-element': MyLitElement;
}
}
我的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, {
// 任何<script type="module">中的内容都将由rollup捆绑
input: './index.html',
plugins: [
// ... 其他rollup插件
json()
]
});
index.html 指向 MyLitElement.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的单页应用</title>
</head>
<body>
<script type="module" src="./out-tsc/src/MyLitElement.js"></script>
</body>
</html>
我已经将捆绑文件嵌入到外部的jsp/html文件中，并包含了执行lit元素的标签：
捆绑文件具有一个名为testMethod的公共函数(console.log('this is test')). 我想从jsp中访问testMethod()。
这是我迄今为止尝试的内容
// jsp文件:
<script type="module" src="https:path_to_my-lit-element-cdn_bundleFile.js"></script>
<my-lit-element></my-lit-element>
<script>
var dcfVar = document.querySelector("my-lit-element");
console.log("dcfvar", dcfVar)
dcfVar.testMethod();
</script>
在 dcfVar.testMethod(); 失败 ==> 报错
Uncaught TypeError: dcfVar.testMethod is not a function
有人能帮助解决这个错误吗？是否可以从外部访问方法？
尝试从外部的jsp调用testMethod()
预期结果 ==> 看到控制台日志: 'Hi from testMethod'
英文:
I have created a simple lit element bundle file using rollup.config.js. This bundle file is uploaded in Netstorage. This is what my lit element looks like:
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;
}
}
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()
]
});
index.html points to MyLitElement.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Single Page Application</title>
</head>
<body>
<script type="module" src="./out-tsc/src/MyLitElement.js"></script>
</body>
</html>
I have embedded the bundle file in an external jsp/html file and include the tags to execute the lit element:
The bundle file has a public function testMethod(console.log('this is test')). I want to access the testMethod() from the jsp.
This is what I have tried so far
//jsp file:
<script type="module" src="https:path_to_my-lit-element-cdn_bundleFile.js"></script>
<my-lit-element></my-lit-element>
<script>
var dcfVar = document.querySelector("my-lit-element");
console.log("dcfvar", dcfVar)
dcfVar.testMethod();
</script>
It fails at dcfVar.testMethod(); ==> says
Uncaught TypeError: dcfVar.testMethod is not a function
Could anyone help with this error. Is accessing the methods externally possible ?
Trying to call testMethod() from external jsp
expected ==> see the console log: 'Hi from testMethod'
答案1
得分: 1
以下是您要翻译的部分：
"The <script> where you're calling the test method is running synchronously before the custom element can be registered as the <script type="module"> is deferred.
To make sure the test method is called when the component is available, you can take advantage of whenDefined.
<script type="module" src="https:path_to_my-lit-element-cdn_bundleFile.js"></script>
<my-lit-element></my-lit-element>
<script>
customElements.whenDefined('my-lit-element').then(() => {
const el = document.querySelector('my-lit-element');
el.testMethod();
});
</script>
英文:
The <script> where you're calling the test method is running synchronously before the custom element can be registered as the <script type="module"> is deferred.
To make sure the test method is called when the component is available, you can take advantage of whenDefined.
<script type="module" src="https:path_to_my-lit-element-cdn_bundleFile.js"></script>
<my-lit-element></my-lit-element>
<script>
customElements.whenDefined('my-lit-element').then(() => {
const el = document.querySelector('my-lit-element');
el.testMethod();
});
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论