我之前也碰到过这个头疼的问题——Google Web Components里的不少元素（比如google-youtube）确实还没发布到npm，没法直接用npm install一键安装。不过折腾了一阵后，我找到了几个靠谱的解决办法，分享给你：

方法一：手动下载并导入元素文件 #

• 先获取目标元素的源码包，解压后把核心的.html或.js文件放到你的项目目录里（比如src/third-party-components/这样的专属文件夹）
• 如果是已经转成ES模块的版本，直接在你的Polymer组件里用ES模块语法导入：

  import './third-party-components/google-youtube.js';
  

• 如果元素还是旧的HTML Imports格式，先安装兼容包：

  npm install @webcomponents/html-imports
  

  然后在项目入口文件（比如index.js）里导入兼容库：

  import '@webcomponents/html-imports';
  

  最后用<link>标签引入元素的HTML文件：

  <link rel="import" href="./third-party-components/google-youtube.html">
  

方法二：用Polymer CLI将HTML Imports转为ES模块 #

• 先确保全局安装了Polymer CLI：

  npm install -g polymer-cli
  

• 下载元素的原始HTML文件后，在终端运行转换命令：

  polymer convert google-youtube.html
  

• 转换完成后，会生成对应的ES模块文件，之后就能像普通Polymer 3组件一样导入使用了

方法三：通过CDN直接引入 #

• 很多Web Components有公开的CDN托管版本，你可以在项目的主HTML文件里通过<script type="module">标签引入对应的模块文件；如果是HTML Import格式的，就配合之前提到的@webcomponents/html-imports兼容包，用<link>标签引入即可。

注意事项 #

• 部分Google Web Components依赖Polymer的基础组件（比如@polymer/polymer），记得提前通过npm install安装这些依赖，避免运行时报错。
• 如果遇到元素依赖其他未安装的组件，需要同样按照上述方法处理依赖项。

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