如何在外部Web应用中使用Polymer 3.0自定义元素

嘿，我正好折腾过Polymer 3元素在生产环境的部署和引用，给你一步步讲清楚怎么弄：

第一步：先把自定义元素打包成生产版本 #

你之前用polymer serve是开发环境，要部署到其他服务器得先构建优化后的文件：

• 在你的my-custom-element目录下运行：polymer build
• 构建完成后，build/default（或者你指定的构建目录）里会有优化好的文件，包括支持ES模块和兼容旧浏览器的版本，还有对应的Web Components polyfill相关文件。

第二步：部署构建后的文件到服务器 #

把build/default里的所有文件上传到你的目标服务器（比如https://your-domain.com/elements/my-custom-element/），确保这些文件能通过URL正常访问。

第三步：配置你的Web App的index.html #

关键来了，因为Polymer 3用ES模块，而IE11不支持，所以要同时处理模块导入和旧浏览器兼容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Web App</title>
  <!-- 加载Web Components polyfill，必须放在所有元素之前，兼容IE11 -->
  <script src="https://your-domain.com/elements/my-custom-element/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <!-- 如果你自己的Web App已经安装了@webcomponents/webcomponentsjs，也可以用本地路径，比如：
  <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  -->
</head>
<body>
  <!-- 直接用你的自定义元素标签 -->
  <my-custom-element></my-custom-element>

  <!-- 给支持ES模块的现代浏览器加载模块版本 -->
  <script type="module" src="https://your-domain.com/elements/my-custom-element/my-custom-element.js"></script>
  <!-- 给IE11这类不支持模块的浏览器加载降级版本 -->
  <script nomodule src="https://your-domain.com/elements/my-custom-element/my-custom-element.nomodule.js"></script>
</body>
</html>

几个重要注意点： #

• CORS配置：如果你的Web App和自定义元素不在同一个域名，要确保托管元素的服务器设置了CORS响应头（比如Access-Control-Allow-Origin: *或者指定你的Web App域名），否则浏览器会拦截跨域脚本。
• polyfill的选择：webcomponents-bundle.js是打包好的全量polyfill，包含了Custom Elements、Shadow DOM等IE11缺失的特性，适合项目要求；如果是现代浏览器为主，也可以用更小的webcomponents-loader.js按需加载，但IE11还是建议用bundle。
• 构建配置调整：如果polymer build没有生成nomodule版本，你可以修改polymer.json的builds配置，添加"js": {"minify": true, "compile": true, "module": true, "nomodule": true}来确保同时生成两种版本。

这样配置后，你的Web App应该就能像本地demo一样正常加载自定义元素，而且完美兼容IE11啦！

内容的提问来源于stack exchange，提问作者Robert