Home

thoughts:

note:

• input is not a container element so we can not use :before & :after to add the indicator and clear button.
• we want to preserve all functionality of input (except input types which do not result in a text-field)

all shadowed

usage:

<brick-input name="name" placeholder="something" type="text"></brick-input>

result:

<brick-input name="name" placeholder="something" type="text">
  #shadow-root
    <input name="name" placeholder="something" type="text" />
    <clearbutton />
    <indicator />
</brick-input>

notes:

need to copy attributes from brick-input to hidden input.

input in light dom (will be used or created)

usage:

<brick-input>
  <input name="name" placeholder="something" type="text" />
</brick-input>
<brick-input name="name" placeholder="something" type="text"></brick-input>

result:

<brick-input name="name" placeholder="something" type="text">
  #shadow-root
    <clearbutton />
    <indicator />
  <input name="name" placeholder="something" type="text" />
</brick-input>

notes:

possible confusion whether the user should interact with input or brick-input

extending input

usage:

<input is="brick-input" placeholder="something" type="text">

result: ??