Polymer 2.x导入失败：“元素未定义”及属性绑定异常问题

碰到这种Polymer元素导入后静默失败，导致<state-user-local>绑定的userLocal变成undefined的情况，我帮你梳理几个最常见的排查方向，大概率能定位到问题：

• 先查导入路径是否正确
  你用的是绝对路径<link rel="import" href="/src/app-state/state-user-local.html">，首先要确认这个路径和你的项目文件结构完全匹配。比如项目根目录下的src/app-state文件夹里，确实存在state-user-local.html文件吗？
  你可以打开浏览器开发者工具的Network面板，搜索这个导入文件的请求，如果返回404状态码，那就是路径写错了——这是静默失败最常见的原因。如果my-app.html本身就在src目录下，建议改成相对路径./app-state/state-user-local.html，更不容易出错。

• 确认<state-user-local>元素是否正确注册
  打开state-user-local.html文件，检查元素的注册代码有没有问题：

  class StateUserLocal extends Polymer.Element {
    static get is() { return 'state-user-local'; } // 这里的元素名必须和HTML里用的完全一致，大小写也不能错
    static get properties() {
      return {
        userLocal: { // 要确保定义了接收父组件传递的user-local属性（Polymer会自动把连字符转成驼峰）
          type: Object,
          notify: true, // 如果需要双向绑定的话必须加这个
          // 可以设置默认值避免初始undefined：
          value: () => ({})
        }
      };
    }
  }
  customElements.define(StateUserLocal.is, StateUserLocal);
  

  如果这里的元素名拼写错误、没有注册，或者没定义对应的属性，都会导致父组件的绑定失效。

• 检查MyApp类的userLocal属性定义
  你代码里static get properties()中的userLocal配置，要确保是正确的：

  static get properties() {
    return {
      userLocal: {
        type: Object,
        // 给个默认空对象，避免初始值就是undefined
        value: () => ({}),
        notify: true // 如果需要和子组件双向绑定的话必须加
      }
    };
  }
  

  如果没有设置value，userLocal初始值就是undefined，就算子组件正常加载，也不会自动变成对象。

• 排查Polymer版本的导入方式兼容性
  如果你用的是Polymer 3.x及以上版本，官方已经弃用HTML导入了，应该用ES模块的import语法：

  import './app-state/state-user-local.js';
  

  要是你混用了HTML导入和ES模块，很可能导致元素无法正常加载，出现静默失败的情况。

• 查看浏览器控制台的隐藏错误
  很多时候“静默失败”其实是有错误的，只是没显示出来。打开浏览器开发者工具的Console面板，勾选Verbose级别，看看有没有关于元素注册、导入失败的警告或错误——比如元素重复注册、代码语法错误、依赖缺失之类的，这些都可能导致元素无法正常初始化。

内容的提问来源于stack exchange，提问作者Let Me Tink About It