嵌入 Web 组件，易于在客户端实现

Question

抱歉，下面的问题并不像它可能的那样具体，但这就是问题所在 - 我已经完成了研究，但我缺乏领域知识来决定我的结论是否正确:)

我想制作一个可以轻松嵌入任何网站的网络组件（无论它使用何种前端技术）。想法是：

我为某人（我们称 him/her 客户）提供了两样东西：

粘贴在前端的代码（如果这段代码只是 fetch/render 外部托管（由我）的脚本 - 不强迫客户在他们这边实施可能的更改）
api 识别客户端的密钥

客户将代码粘贴到他的前端并向查询提供 api 令牌
那么它应该与我的后端有两种通信方式（通过网络）

Imo 这正是这种情况，例如嵌入 google 地图：(https://developers.google.com/maps/documentation/embed/map-generator#create-project)

 <iframe width="600" height="450" style="border:0" loading="lazy" allowfullscreen
src="https://www.google.com/maps/embed/v1/undefined?origin=...&q=...&destination=...&center=...&zoom=...&key=...">

据我了解，他们只是创建 iframe 并从他们的服务器获取 .js。现在，我想知道这样做是否是我最好的选择。我正在寻找一个框架来尽可能快地进行开发。我找到了 lit-elements (https://lit.dev/) - 你认为这可能是一个不错的选择吗？

Answer 1

是的，这绝对有可能。将您的 js 作为模块加载。

<script type="module" src="path-to-your-module.mjs"></script>

然后你可以实现以下（所有内联以方便展示）：

<script type="module">
import {
  LitElement,
  html,
  css
} from "https://unpkg.com/lit-element/lit-element.js?module";

class ElementWithAPIKey extends LitElement {

 static get properties() {
  return {
    apiKey: {type: String}
  };
 }

 render() {
  return html`
      <h1>Example APIKEY: ${this.apiKey}</h1>
  `;
 }
}

customElements.define("my-element", ElementWithAPIKey);
</script>
<my-element apiKey="CAFEBABE"></my-element>

无论您使用哪个框架，这都行得通。

嵌入 Web 组件，易于在客户端实现

Embedding web component with easy implementation on the client side

html

web-frontend

lit-element