gOmPyEr

gompyer.markdown

gOmPyEr

A Pen by Ulrich-Matthias Schäfer on CodePen.

License.

index.html

<svg width="500" height="500">
  <foreignObject width="1" height="1" x="10" y="10" style="overflow:visible;">
    <pre id="pre"></pre>
  </foreignObject>
</svg>

script.js

const el = document.getElementById('pre')

// works
el.textContent += 'aaaaa'

setInterval(() => {
  // does not work
  el.textContent += 'a'
}, 1000)

style.css

pre {
  background: #f5f5f5;
  outline: 1px solid black;
  user-select:  auto;
  display: inline-block;
  margin: 0;
  padding: 2px;
  user-select: none;
}