lit-html事件侦听器未正确呈现
lit-html事件侦听器未正确呈现
提问于 2019-03-25 23:51:37
我有一个向客户端(即浏览器)返回html的lambda服务。但是，事件侦听器不起作用。知道为什么吗？代码如下：
const serverless = require('serverless-http');
const express = require('express');
const fetch = require('node-fetch');
const app = express();
app.get('/', function (req, res) {
var htmlText = `
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.7/webcomponents-loader.js"></script>
<script type="module" >
import {html, render} from 'https://unpkg.com/lit-html?module';
/**
* Adapted from the Ractive.js clock example: http://www.ractivejs.org/examples/clock/
*/
export class MyElement extends HTMLElement {
// Define a template
get flag() { return this._flag; }
set flag(v) { this._flag = v }
constructor() {
super();
this.attachShadow({mode: 'open'});
setInterval(() => {
if (!this.flag) {
this.flag = true;
render(this.render(), this.shadowRoot);
}
}, 1000);
}
// Render the template to the document
render(site) {
console.log("called")
return html\`
<style>
:host {
display: block;
padding: 0 15px;
border-right: 1px solid #333333;
line-height: 12px;
}
</style>
<button @click="${() => console.log('button was clicked')}">BUTTON</button>
\`
}
}
customElements.define('my-element', MyElement);
</script>
</head>
<body>
<p>Hello World</p>
<my-element></my-element>
</body>
</html>
`;
res.send(htmlText)
});
module.exports.handler = serverless(app);从Chrome dev工具中查看shadowroot，按钮被错误地呈现为<button @click="() => console.log('button was clicked')">BUTTON</button>。你知道我做错了什么吗？谢谢。
回答 1
Stack Overflow用户
发布于 2019-03-27 03:06:29
在shadow dom中，尝试导入litElement而不是lit-html，因为lit-html允许你用JavaScript编写HTML模板。
import {html, render} from 'https://unpkg.com/lit-element'
class MyElement extends LitElement {...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55341673
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号