Find a way to test assigning values via properties and attributes

[driskull]

Background

Not all properties are reflected to the DOM, however we have a lot of CSS that relies on attribute selectors on the host.

If a property isn't reflected but a attribute selector is used in styles, we may not catch the rendering issue since all of our tests and stories rely on attributes

We need to figure out a way to test components by assigning via attributes and properties

Example:

Input.scss has the following CSS:

:host([prefix-text]) input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

However, the property prefixText is not reflected.

The HTML examples use attributes and the screenshot tests use attributes so this error would not be caught if assignign prefixText via a property.

Desired Outcome

Ensuring that assigning values via properties renders the component correctly.

Related to #10959.