contenteditable h1元素空内容时按下回车光标不遵循text-indent的问题求助

我这段JS代码的作用是，当h1的文本内容为空时移除剩余的换行元素，这样:empty::before伪元素的样式就能正常生效。这是我正在开发的代码的简化版本，所以elemToDel相关的操作是必须保留的。

现在遇到的问题是：当h1里没有任何文本时按下回车键，光标似乎会忽略设置的text-indent属性，跑到容器最左边去了。

代码示例 #

JavaScript

const h1 = document.querySelector('h1');

h1.addEventListener('input', () => {
  if (h1.textContent !== '') return;
  
  let elemToDel = [];
    
  for (let i of h1.children) {
    elemToDel.push(i);
  }

  elemToDel.forEach(i => i.remove());
});

CSS

h1 {
  border: 1px black solid;
  outline: none;
  text-indent: 36px;
}

h1:empty::before {
  content: attr(placeholder);
  color: grey;
}

HTML

<h1 placeholder="Text Here" contenteditable="true"></h1>

现象对比 #

按下回车之前：

按下回车之后：

我尝试过的方法 #

• 我在elemToDel.forEach(i => i.remove());之后添加了这段代码，试图让光标回到正确的位置，但没有效果：

const caretPos = window.getSelection();
const range = document.createRange();

range.selectNodeContents(h1);
range.collapse(false);

caretPos.removeAllRanges();
caretPos.addRange(range);

• 我还试过在移除元素后设置h1.textContent = ' ';，这确实解决了光标位置的问题，但代价是:empty::before伪元素会消失，因为h1不再是空的了。

另外我还发现，如果完全去掉:empty::before的样式，这个光标问题也会消失。目前我倾向于认为这可能是浏览器的一个bug，但还是想问问有没有什么修复方案或者替代方法？

备注：内容来源于stack exchange，提问作者Kroaker