IE11下HTML元素class属性字符间莫名加空格的排查求助

我之前在处理IE11兼容性问题时碰到过类似的边缘场景，结合你的描述和配置，给你分享下可能的诱因和具体的调试定位方法：

一、可能的诱因分析 #

1. Core-js 3 Polyfill的兼容性冲突
   IE11对ES6+语法的支持极差，core-js 3的polyfill在模拟某些字符串或DOM操作方法时，可能存在逻辑漏洞。比如在处理element.className的赋值时，错误地将字符串拆分为单个字符并以空格分隔，尤其是当两个包都启用了useBuiltIns: 'usage'时，可能导致同一polyfill被重复注入，触发IE11下的特殊bug。

2. 自定义元素Polyfill与Core-js的冲突
   Package2依赖webcomponentsjs来在IE11中支持自定义元素，这个polyfill本身会修改DOM属性的处理逻辑，而core-js对String或Element的方法polyfill可能和它的逻辑产生冲突，最终导致class属性被异常处理。

3. Webpack打包的模块作用域问题
   两个包都使用了LimitChunkCountPlugin将代码打包为单chunk，加上相同的devtoolNamespace，可能导致模块间的变量或方法被意外覆盖。比如某个版本的包中，对class属性的处理逻辑被另一个包的polyfill篡改。

4. Babel转译的细微差异
   不同版本的包可能使用了不同版本的Babel插件（比如@babel/plugin-transform-runtime或@babel/preset-env），转译后的代码在IE11下的执行逻辑存在差异，某个版本的转译结果恰好触发了class属性的异常处理。

二、IE11中定位触发代码的具体方法 #

1. 利用IE11 DevTools的属性修改断点 #

这是最直接的方法：

• 打开IE11的开发者工具（F12），切换到Elements面板
• 找到出现问题的元素，右键点击它，选择Break on -> Attribute modifications
• 在弹出的窗口中勾选class属性
• 触发页面操作直到class属性被修改，此时会自动断到对应的JS代码处，通过source map可以定位到源码中的具体位置

2. 重写DOM/字符串方法追踪调用栈 #

在页面加载最早期（比如在引入两个包之前）插入以下代码，用来监控class属性的修改：

// 重写setAttribute方法，监控class属性的异常赋值
const originalSetAttr = Element.prototype.setAttribute;
Element.prototype.setAttribute = function(attrName, attrValue) {
  if (attrName === 'class') {
    // 判断是否是每个字符间都有空格的异常格式
    const isAbnormal = attrValue.trim().split('').every((char, index) => {
      return index % 2 === 1 ? char === ' ' : true;
    });
    if (isAbnormal) {
      console.log('异常class值被设置:', attrValue);
      console.trace(); // 打印完整调用栈
      debugger; // 触发断点
    }
  }
  return originalSetAttr.call(this, attrName, attrValue);
};

// 同时监控className的直接赋值
const originalClassNameDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'className');
Object.defineProperty(Element.prototype, 'className', {
  set: function(value) {
    const isAbnormal = value.trim().split('').every((char, index) => {
      return index % 2 === 1 ? char === ' ' : true;
    });
    if (isAbnormal) {
      console.log('异常className被赋值:', value);
      console.trace();
      debugger;
    }
    originalClassNameDesc.set.call(this, value);
  },
  get: originalClassNameDesc.get,
  enumerable: true,
  configurable: true
});

这段代码会在异常class值被设置时触发断点，并打印调用栈，帮你找到源头代码。

3. 排查依赖版本与polyfill冲突 #

• 用npm ls core-js查看两个包在异常版本组合下的core-js实际版本，确认是否存在版本不一致的情况
• 尝试临时修改其中一个包的Babel配置，将useBuiltIns改为entry，或者暂时禁用@babel/plugin-transform-runtime的corejs选项，看是否能消除问题，缩小排查范围
• 单独测试两个包的不同版本，确认是哪个包的哪个版本引入了问题，再对比该版本的依赖变更或代码变更

4. 禁用Webpack插件排查打包影响 #

尝试临时禁用两个包中的LimitChunkCountPlugin，将代码拆分为多个chunk，看是否还会出现问题，排除模块拼接导致的作用域冲突。

附相关配置信息 #

Package 1（非UI组件） #

Babel配置

module.exports = { 
  "presets": [ 
    [ "@babel/preset-env", { 
      targets: { 
        browsers: [ "> 0.25%", "last 2 versions", "ie 11", "edge 18", "safari >= 11", "not dead" ] 
      }, 
      corejs: 3, 
      useBuiltIns: "usage", 
      debug: false 
    } ] 
  ], 
  "ignore": [ /babel-/, /@babel\/runtime/, /core-js/, /regenerator-runtime/ ], 
  "plugins": [ 
    [ "@babel/plugin-proposal-decorators", { legacy: true } ], 
    [ "@babel/plugin-proposal-class-properties", { loose: true } ], 
    [ "@babel/plugin-transform-runtime", { regenerator: true, corejs: 3 } ] 
  ], 
  "sourceMaps": true, 
  "sourceType": "unambiguous" 
};

Webpack配置（合并后）

// common
{
  entry: path.join( __dirname, 'src', 'Main.js' ),
  devtool: 'source-map',
  output: { devtoolNamespace: 'APPNAME' },
  module: {
    rules: [
      { enforce: 'pre', test: /\.js$/, loader: 'eslint-loader', exclude: [ /node_modules/ ] },
      { test: /\.js$/, loader: 'babel-loader', }
    ]
  },
  plugins: [ new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) ]
};

// production
{
  mode: 'production',
  output: { path: path.join(__dirname, 'dist'), filename: libnamemin },
  optimization: { 
    moduleIds: 'total-size', 
    mangleWasmImports: true, 
    concatenateModules: false, 
    minimizer: [ 
      new BabelMinifyPlugin({ removeDebugger: true, mangle: true },{ comments: false, sourceMap: 'source-map' }) 
    ] 
  },
  module: { rules: [] },
  plugins: [ 
    new CleanWebpackPlugin(), 
    new BundleAnalyzerPlugin({ 
      analyzerMode: 'static', 
      openAnalyzer: false, 
      generateStatsFile: true, 
      reportFilename: path.join(__dirname, './reports/bundle/report.html'), 
      statsFilename: path.join(__dirname, './reports/bundle/stats.json') 
    }) 
  ]
};

Package 2（使用customElements的UI组件） #

Babel配置

module.exports = { 
  "presets": [ 
    [ "@babel/preset-env", { 
      targets: { 
        browsers: [ "> 0.25%", "last 2 versions", "ie 11", "edge 18", "safari >= 11", "not dead" ] 
      }, 
      corejs: 3, 
      useBuiltIns: "usage", 
      debug: false 
    } ] 
  ], 
  "ignore": [ /babel-/, /@babel\/runtime/, /core-js/, /regenerator-runtime/, /webcomponentsjs/, /@webcomponents/ ], 
  "plugins": [ 
    [ "@babel/plugin-proposal-decorators", { legacy: true } ], 
    [ "@babel/plugin-proposal-class-properties", { loose: true } ], 
    [ "@babel/plugin-transform-runtime", { regenerator: true, corejs: 3 } ], 
    [ "@babel/plugin-syntax-dynamic-import", { } ] 
  ], 
  "sourceMaps": true, 
  "sourceType": "unambiguous" 
};

Webpack配置（合并后）

// common
{
  entry: path.join( __dirname, 'src', 'App.js' ),
  devtool: 'source-map',
  output: { devtoolNamespace: 'APPNAME' },
  module: {
    rules: [
      { enforce: 'pre', test: /\.js$/, loader: 'eslint-loader', exclude: [ /node_modules/ ] },
      { test: /\.(svg|png|woff|woff2)$/, loader: 'url-loader' },
      { test: /\.css|\.s(c|a)ss$/, use: [ 
        'to-string-loader', 
        { loader: 'css-loader', options: { importLoaders: 1 } }, 
        { loader: 'sass-loader', options: { sassOptions: { importer: jsonImporter() } } } 
      ] },
      { test: /\.js$/, loader: 'babel-loader', options: { root : __dirname, rootMode: 'upward-optional' } }
    ]
  },
  plugins: [ 
    new UnusedFilesWebpackPlugin({ patterns: ['./src/resources/images/*', './src/resources/logos/*'], }), 
    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) 
  ]
};

// production
{
  mode: 'production',
  output: { path: path.join(__dirname, 'build'), filename: 'APPNAME.min.js' },
  optimization: { 
    moduleIds: 'total-size', 
    mangleWasmImports: true, 
    concatenateModules: false, 
    minimizer: [ 
      new BabelMinifyPlugin({ removeDebugger: true, mangle: true },{ comments: false, sourceMap: 'source-map' }) 
    ] 
  },
  module: { rules: [] },
  plugins: [ 
    new CleanWebpackPlugin(), 
    new webpack.DefinePlugin({ 
      'process.env.__TF_NAME__': JSON.stringify(pkg.name), 
      'process.env.__TF_VERSIONBUILD__': JSON.stringify('__METADATA_VERSION_BUILD__'), 
      'process.env.__TF_VERSION__': JSON.stringify('__METADATA_VERSION__'), 
      'process.env.__TF_BUILDDATE__': JSON.stringify((new Date(Date.now())).toUTCString()) 
    }), 
    new BundleAnalyzerPlugin({ 
      analyzerMode: 'static', 
      openAnalyzer: false, 
      generateStatsFile: true, 
      reportFilename: path.join(__dirname, './reports/bundle/report.html'), 
      statsFilename: path.join(__dirname, './reports/bundle/stats.json'), 
    }) 
  ]
};

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