In addition to props, developers can bind attributes to Vue components when using them, like so:

<cdx-text-input placeholder="Search" />

By default, all attributes will be applied to the root element of the component. Sometimes, though, this is not what we want. In the example above, we actually want the placeholder to be applied to the <input> element within the TextArea component, not to the outer <div> element. In order to actually work as a placeholder attribute, it must be bound to the <input>.

However, there are 2 attributes that should always be bound to the root element: class and style. When a developer adds a custom CSS class to a Vue component, for example, they probably want that class on the outer-most element so they can apply styles to the entire component and any of its sub-elements.

To resolve this common issue, we have created a composable in Codex called useSplitAttributes. See the Codex contributing docs for more info.

Acceptance criteria

• useSplitAttributes is implemented in the CdxTextArea component
• A new snapshot test is added to demonstrate this behavior (see TextInput.test.ts for an example)
• A placeholder attribute is added to the TextAreaDemo component to show that this works as expected