lit-html 事件偵聽器未正確呈現

Question

我有一個將 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 開發工具查看 shadowroot，該按鈕被錯誤地呈現為<button @click="() => console.log('button was clicked')">BUTTON</button> 。 知道我做錯了什么嗎？ 謝謝。

Answer 1

在 shadow dom 中嘗試導入litElement而不是lit-html因為lit-html允許您在 JavaScript 中編寫 HTML 模板。

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

class MyElement extends LitElement {...

lit-html 事件偵聽器未正確呈現

問題描述

1 個解決方案

解決方案1
0 2019-03-26 19:06:28

lit-html 事件偵聽器未正確呈現

問題描述

1 個解決方案

解決方案1 0 2019-03-26 19:06:28

解決方案1
0 2019-03-26 19:06:28