[field-highlighter] Setting overflow: visible breaks text-area scroll

[web-padawan]

Problem

The following logic is problematic as it breaks text-area scroll when e.g. max-height is set:

web-components/packages/field-highlighter/src/fields/outline.js

Lines 45 to 47 in 202d1c4

	if (tagName.endsWith('text-area')) {
	target.style.overflow = 'visible';
	}

Proposed solution

Consider removing the above logic and changing text-area outline styles somehow.
There is a limitation of vaadin-field-outline being a child of vaadin-input-container.

Steps to reproduce

Can be reproduced using following code in the dev page:

<vaadin-text-area
  label="Comment"
  value="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sunt repudiandae, fugit, voluptatum voluptate distinctio accusamus cum ducimus quia similique earum quis totam, quod aperiam! Sint nam neque officia! Delectus."
  style="max-height: 150px"
></vaadin-text-area>

<script type="module">
  const field = document.querySelector('vaadin-text-area')

  FieldHighlighter.init(field);

  window.requestAnimationFrame(() => {
    const users = [
      { id: 'a', name: 'User', colorIndex: 0, fieldIndex: 0 },
      { id: 'b', name: 'Moderator', colorIndex: 1, fieldIndex: 1 },
      { id: 'c', name: 'Admin', colorIndex: 2, fieldIndex: 1 },
    ];

    // Mimic focus to show highlight and badges
    field.dispatchEvent(new CustomEvent('mouseenter'));

    FieldHighlighter.setUsers(field, users);
  });
</script>