兄弟，我太懂你这种头疼的情况了——Webflow Designer用的是受控组件框架（类似React），普通DOM操作根本碰不到它的内部状态，自然不会触发编辑器的自动保存逻辑。我之前踩过一模一样的坑，给你几个亲测有效的方案，按顺序试：

1. 先确保你找对了正确的输入框DOM #

很多人第一步就栽在这里：Webflow的自定义属性输入框会根据选中元素动态渲染，而且可能套了多层容器。别瞎用document.querySelector('input')，精准定位才是关键：

• 先在Webflow Designer里点击你要修改的自定义属性输入框
• 切到Chrome DevTools的Elements面板，找到这个输入框（DevTools会自动高亮）
• 看它的专属标识：比如带data-testid="custom-property-value"，或者在.custom-property-row容器里

给你个通用的定位代码，把--your-custom-prop-name换成你要改的属性名：

// 根据属性名称定位对应的输入框
const targetPropName = '--your-custom-prop-name';
const propRow = Array.from(document.querySelectorAll('.custom-property-row'))
  .find(row => row.querySelector('.custom-property-name').textContent.trim() === targetPropName);
const input = propRow?.querySelector('input[type="text"]');

// 先确认找到元素了，没找到就别往下走
if (!input) {
  console.error('没找到目标输入框！检查属性名或当前选中元素');
}

2. 触发Webflow真正监听的事件流 #

你之前触发的input/change事件太基础了，Webflow的受控组件需要更完整的事件链，尤其是要带上composed: true（穿透它的Shadow DOM容器），还要加上失去焦点事件触发保存：

if (input) {
  const newValue = '你要设置的新属性值';
  
  // 1. 先设置输入框值
  input.value = newValue;
  
  // 2. 触发Webflow内部监听的完整事件链
  input.dispatchEvent(new Event('compositionend', { bubbles: true, cancelable: true, composed: true }));
  input.dispatchEvent(new Event('input', { bubbles: true, cancelable: true, composed: true }));
  input.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
  
  // 3. 关键一步：让输入框失去焦点，触发Webflow的自动保存逻辑
  input.blur();
  
  // 保险起见，手动触发编辑器保存（可选）
  const saveBtn = document.querySelector('[data-testid="editor-save-button"]');
  saveBtn?.click();
}

3. 进阶：直接调用Webflow内部状态API（不稳定但高效） #

Webflow Designer在window对象里藏了内部状态管理的全局变量，虽然官方没公开，但目前版本（2024年中）还能用。直接绕开DOM，从根上修改属性：

// 先获取当前选中的元素
const selectedEl = window.Webflow?.editor?.getSelectedElement();
if (!selectedEl) {
  console.error('先在Designer里选中要修改属性的元素！');
  return;
}

// 修改自定义属性
const targetProp = '--your-custom-prop-name';
const newValue = '你的新属性值';
selectedEl.setStyleProperty(targetProp, newValue);

// 手动触发编辑器保存
window.Webflow?.editor?.save();

注意：这个方法依赖Webflow的内部实现，哪天他们更新代码可能就失效了，但胜在一步到位，不用折腾DOM事件。

4. 终极排查：看Webflow到底监听了什么事件 #

如果上面都没用，直接去DevTools查这个输入框的事件监听：

1. 在Elements面板选中目标输入框
2. 切到Event Listeners标签，展开所有事件
3. 找Webflow专属的自定义事件（比如wf:input:update这类带wf:前缀的）
4. 直接触发这个自定义事件，带上值：

input.dispatchEvent(new CustomEvent('wf:input:update', {
  bubbles: true,
  composed: true,
  detail: { value: newValue } // 按Webflow的事件格式传值
}));

最后提醒一句：Webflow经常更新编辑器代码，这些hack方法都不是长期稳定的，但临时批量修改自定义属性绝对够用。如果哪天突然失效了，重复上面的“查事件监听”步骤，总能找到新的触发方式！