WebpackDevServer构建后带reversed属性的Web组件大小调整不一致问题

• 布局属性读取时机错误：自定义元素的constructor执行阶段，元素尚未插入当前页面的DOM树，处于脱离文档流的状态，此时调用offsetHeight、getComputedStyle等需要依赖布局计算的API，拿到的数值是不准确的。你遇到的热更正常、刷新异常的差异就来自这里：webpack热更新触发组件重新渲染时，页面DOM已经完成挂载，此时读取的布局值是正确的；刷新页面时构造函数执行在DOM挂载前，读取的高度错误，最终导致容器高度计算偏差，出现底部多余白条。
• 定位方案存在天然缺陷：你通过将projDesc改为绝对定位实现反转的逻辑，会直接导致父容器container失去唯一的普通流子元素支撑，高度完全依赖你手动计算赋值，只要计算值有偏差就会出现布局异常。

原有逻辑最小改动方案 #

把reversed属性的处理逻辑从constructor移到自定义元素的connectedCallback生命周期回调中，这个回调会在元素正式插入DOM树、布局完成后触发，此时读取的尺寸属性是准确的：

class FeaturedProjectCard extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    // 原有除了reversed处理之外的逻辑都保留在这里
    // 插入图片、标题、描述、软件标签、链接的逻辑不变
    this.innerHTML = null
  }

  connectedCallback() {
    // reversed相关逻辑移到此处执行
    if(this.hasAttribute('reversed')) {
      this.shadowRoot.querySelector('.bottomDivider').style.right = 0;
      const container = this.shadowRoot.querySelector('.container')
      const projDesc = this.shadowRoot.querySelector('.projDesc')
      // 先读取未改定位前的正确高度
      const correctHeight = projDesc.offsetHeight
      const projImage = this.shadowRoot.querySelector('.projImage')
      const softwareItems = Array.from(this.shadowRoot.querySelectorAll('.softwareContainer > span'))
      // 赋值正确高度后再修改定位
      container.style.height = `${correctHeight}px`
      projDesc.style.position = 'absolute'
      projDesc.style.right = '0'
      projDesc.style.left = 'auto'
      projImage.style.left = '0'
      projImage.style.right = 'auto'
      projDesc.style.alignItems = 'flex-end'
      softwareItems.splice(0, 1)[0].style.padding = '0'
      const padding = getComputedStyle(softwareItems[0]).getPropertyValue('padding-right')
      softwareItems.forEach(item => {
          item.style.paddingLeft = padding
          item.style.paddingRight = '0'
      })
    }
  }
}

更稳定的优化方案 #

完全放弃绝对定位的实现方式，用Flex布局实现反转，从根源避免高度塌陷问题，不需要手动计算容器高度：

1. 先修改CSS样式：

.container {
    position: relative;
    width: 1000px;
    isolation: isolate;
    /* 新增Flex布局样式 */
    display: flex;
    align-items: center;
}
.projDesc {
    width: 50%;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.projImage {
    /* 移除原有absolute、transform相关属性 */
    height: 300px;
    background-color: yellow;
    border-radius: 5px;
    z-index: -1;
    margin-left: auto; /* 普通状态下靠右对齐 */
}

2. 修改reversed逻辑：

if(this.hasAttribute('reversed')) {
  const container = this.shadowRoot.querySelector('.container')
  // 仅修改Flex方向即可实现反转，无需改定位
  container.style.flexDirection = 'row-reverse'
  this.shadowRoot.querySelector('.projImage').style.marginLeft = '0'
  this.shadowRoot.querySelector('.projImage').style.marginRight = 'auto'
  this.shadowRoot.querySelector('.bottomDivider').style.right = 0
  // 软件标签padding调整逻辑保留即可
}

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