如何在没有节点的情况下运行基于 Web 组件的 HTML？

问题描述

我一直在关注“如何使用 Web 组件？”一节。来自

很快我就意识到 node 和 npm 是必须的。最重要的是，您必须运行 node 来为其提供服务。

<html>
<head>    
    <script type="module" src="node_modules/@polymer/paper-button/paper-button.js"></script>
</head>
<body>    
    <paper-button raised class="indigo">raised</paper-button>
</body>
</html>

什么是最简单的 - 无节点 - 运行这个简单的 Web 组件的方法？

解决方法

最简单的方法可能是通过像 UNPKG https://unpkg.com/ 这样的 CDN 包含脚本。

<html>
<head>    
    <script
        type="module"
        src="https://unpkg.com/@polymer/paper-button@3.0.1/paper-button.js?module"></script>
</head>
<body>    
    <paper-button raised class="indigo">raised</paper-button>
</body>
</html>

无视一切“聚合物”，
更好的是......烧掉它，把你的咖啡扔到你看到这个标题的每台显示器上。

它基于 Web Components 的 V0 实现；
这基本上是 Google lets-throw-something-at-the-wall-and-see-if-other-vendors-adopt-it 试图将 Web Components 强加给我们的尝试。

整个 V0 时代使“Web Components”名声不佳，以及像
这样吸引人的博客标题 “Web 组件的破碎承诺”
（但每个参与者都学会了不做什么）

多年来，所有浏览器供应商都在 V1

Web 组件在所有现代浏览器中运行......期间......所以你只需要一个浏览器......
没有构建步骤..没有打包器..没有包裹..没有 Svelte 编译器...没有罗马......没有大惊小怪

使用任何在线编辑器，如 JSFiddle 或 CodePen，或您自己的 IDE，或使用您的 F12 源面板
只需几行代码即可开始

<my-component name="Alex"></my-component>
<script>
  customElements.define("my-component",class extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `<h2>${this.getAttribute("name")} his very first Custom Element!</h2>`;
    }
  });
</script>

构成“Web 组件”的 3 个不同（每个都可以单独使用）技术帮助您构建更复杂的组件

很快您将阅读有关 Lit 和 Hybrids、Stencil 和 uCe 以及使开发 Web 组件“更容易”的所有类型的工具...
它们只是……工具； 一旦您完全了解技术

，您就可以选择一两个

polymer web-component