Polymer lit html事件侦听器未正确呈现_Polymer_Lit Html

Polymer lit html事件侦听器未正确呈现

polymer

Polymer lit html事件侦听器未正确呈现,polymer,lit-html,Polymer,Lit Html,我有一个lambda服务，它将html返回给客户端（即浏览器）。但是，事件侦听器不工作。知道为什么吗？代码如下： const serverless = require('serverless-http'); const express = require('express'); const fetch = require('node-fetch'); const app = express(); app.get('/', function (req, res) { var htmlText

我有一个lambda服务，它将html返回给客户端（即浏览器）。但是，事件侦听器不工作。知道为什么吗？代码如下：

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);

const serverless=require（'serverless-http'）；
const express=require（'express'）；
const fetch=require（'node-fetch'）；
常量app=express（）；
app.get（'/'，函数（req，res）{
var htmlText=`
导入{html，render}from'https://unpkg.com/lit-html?module';
/**
*改编自Ractive.js时钟示例：http://www.ractivejs.org/examples/clock/
*/
导出类MyElement扩展了HtmleElement{
//定义模板
get flag（）{返回此。\u flag；}
设置标志（v）{this.\u flag=v}
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）；
设置间隔（（）=>{
如果（！this.flag）{
this.flag=true；
render（this.render（），this.shadowRoot）；
}
}, 1000);
}
//将模板呈现到文档中
渲染（现场）{
console.log（“被调用”）
返回html\`
：主持人{
显示：块；
填充：0 15px；
右边框：1px实心#333333；
线高：12px；
}
按钮
\`
}
}
自定义元素。定义（'my-element'，MyElement）；
你好，世界
`;
res.send（htmlText）
});
module.exports.handler=serverless（应用程序）；

查看Chrome开发工具中的shadowroot，该按钮被错误地渲染为

按钮

。知道我做错了什么吗？谢谢。

在阴影dom中尝试导入

litElement

而不是

lit html

，因为

lit html

允许您用JavaScript编写html模板

import {html, render} from 'https://unpkg.com/lit-element'

class MyElement extends LitElement {...

在shadowdom内部，尝试导入

litElement

而不是

lit-html

，因为

lit-html

允许您用JavaScript编写html模板

import {html, render} from 'https://unpkg.com/lit-element'

class MyElement extends LitElement {...