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.
• could cause problems with regular forms, because it is not and its light-dom does not contain a 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
• do we proxy all input attributes and methods on brick-input?

extending input

usage:

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

result: ??