无需导入，能否在使用页面的HTML中直接定义Polymer Web Components？

当然可以！在Polymer里，你完全能直接在主页面的HTML文件中定义Web组件，不需要依赖<link rel="import">导入外部组件文件——这种方式确实能减少额外的HTTP请求，提升页面加载速度，对简单组件来说特别实用。

下面给你具体讲怎么实现，以及需要注意的细节：

1. 直接在主HTML中内联定义组件 #

你只需要确保先加载Polymer依赖的Web Components polyfill，然后在页面的<head>或<body>中直接编写组件的dom-module定义就行。举个完整的例子：

<!DOCTYPE html>
<html>
<head>
  <!-- 先加载Web Components polyfill -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  
  <!-- 直接在这里定义你的组件 -->
  <dom-module id="my-inline-component">
    <template>
      <style>
        :host {
          display: block;
          margin: 16px;
          padding: 16px;
          border: 1px solid #ddd;
          border-radius: 4px;
        }
      </style>
      <h3>我是内联定义的组件</h3>
      <p>当前计数：{{count}}</p>
      <button on-tap="increment">点击增加</button>
    </template>
    <script>
      Polymer({
        is: 'my-inline-component',
        properties: {
          count: {
            type: Number,
            value: 0
          }
        },
        increment() {
          this.count++;
        }
      });
    </script>
  </dom-module>
</head>
<body>
  <!-- 直接使用这个内联组件 -->
  <my-inline-component></my-inline-component>
</body>
</html>

2. 关键注意事项 #

• 定义顺序要正确：组件必须在被使用之前完成定义，所以建议把组件代码放在<head>里，或者<body>的最顶部，保证浏览器解析到组件标签时，组件已经注册好了。
• 权衡复用性与性能：如果这个组件只在当前页面使用，内联定义很合适；但如果要在多个页面复用，内联会导致代码重复，这时候还是用<link rel="import">导入外部文件更利于维护。
• 版本兼容性：这种内联写法在Polymer 1.x、2.x都能正常工作；到了Polymer 3.x，框架转向ES Modules，写法会变成用JS模块定义，但核心逻辑一样——你也可以在主页面的模块脚本里直接定义组件。

3. 为什么大部分指南都用<link rel="import">？ #

虽然内联定义能提升加载速度，但官方指南更推荐导入方式，主要是因为：

• 模块化复用：Web Components的核心价值就是组件化拆分，独立文件的组件更易维护、复用和共享。
• 代码结构清晰：大型项目中，拆分组件能避免主页面HTML过于臃肿，代码组织更有条理。
• 缓存优化：外部组件文件可以被浏览器缓存，用户访问多个使用同一组件的页面时，不需要重复下载。

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