React 16.3.2集成Polymer 1.x Web组件在Safari报错求解决方案

针对你遇到的TypeError: undefined is not an object (evaluating 'descriptor.get')报错，结合你的技术栈和浏览器兼容性情况，我整理了以下可能的原因和可行的解决方向：

可能的原因分析 #

• Safari对属性描述符的特殊处理：Safari（尤其是旧版本）对DOM元素的属性描述符处理逻辑和Chrome、Firefox存在差异。Polymer 1.x依赖的webcomponents-lite 0.7.24 polyfill会给自定义元素添加ES5风格的getter/setter，当React 16.3.2的DOM diff逻辑尝试读取这些元素的属性描述符时，Safari可能返回undefined，进而触发descriptor.get的报错。
• React与Polymer的DOM操作冲突：React 16.3.2的DOM更新机制会主动检查元素属性的描述符来判断如何更新DOM，但Polymer的自定义元素被polyfill修改了原生属性行为，两者对DOM的操作逻辑不兼容，导致React在处理这些元素时出现异常。
• Web Components polyfill的Safari兼容性局限：虽然你用的是兼容Polymer 1.x的最新lite版polyfill，但它针对Safari的边缘场景支持可能不足，特别是和React这类框架共存时，容易出现属性描述符相关的兼容性问题。

可行的解决方向 #

• 升级Safari版本：如果测试的是Safari 10及以下版本，建议升级到Safari 12+，新版本对Web Components的原生支持和ES5特性的处理更完善，可能直接解决该问题。
• 隔离React与Polymer的DOM操作：不要让React直接管理Polymer自定义元素的属性和状态，改用原生DOM API操作：
  在React组件的生命周期方法（如componentDidMount、componentDidUpdate）中，通过refs或原生DOM查询获取Polymer元素，再用setAttribute或调用元素方法来更新状态，避免React的DOM diff触及这些元素的属性。示例代码：

  class PolymerWrapper extends React.Component {
    constructor(props) {
      super(props);
      this.polymerRef = React.createRef();
    }
  
    componentDidMount() {
      this.updatePolymerProps();
    }
  
    componentDidUpdate(prevProps) {
      if (prevProps.userData !== this.props.userData) {
        this.updatePolymerProps();
      }
    }
  
    updatePolymerProps() {
      const polymerEl = this.polymerRef.current;
      if (polymerEl) {
        polymerEl.setAttribute('user-data', JSON.stringify(this.props.userData));
        // 或者调用Polymer元素的公开方法
        polymerEl.refreshData();
      }
    }
  
    render() {
      return <my-polymer-component ref={this.polymerRef} />;
    }
  }
  

• 调整Polymer组件的属性定义：检查你的Polymer组件的properties配置，避免使用可能在Safari中触发兼容性问题的复杂getter逻辑，确保所有属性的getter都有明确的返回值，且符合ES5规范。
• 测试Web Components polyfill的完整版本：尝试替换webcomponents-lite为完整的webcomponents.js（注意要选择兼容Polymer 1.x的版本），完整版本包含更多的兼容性补丁，可能修复Safari下的描述符问题。
• 避免将Polymer属性作为React props直接传递：不要直接把Polymer元素的属性写在JSX中（比如<my-polymer-component prop={this.props.value} />），这种写法会让React尝试处理这些属性，进而触发报错，改用上述的原生API方式更新。

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