Pack it in a Web Component

Arijit Bhattacharya

UI Dev, Freshworks

Twitter - @hwk73

Abstractions of a DOM element


  • Nature of information content <p>, <img>, <table>

  • Initilialization state
<input name="web-components" type="checkbox" checked />
<label for="web-components">Web Components</label>

  • Encapsulation
<!-- The second value will be selected initially -->
<select name="text"> <!--Supplement an id here instead of using 'text'-->
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>


The Interactive Age


  • Date Picker
  • Modals
  • Tabs
  • Tooltips
  • Accordion
  • Editor

Irrespective of Framework


  • Today implementation of a UI element gets done in different frameworks. So, we stay in our own world of frameworks.

  • Although a UI element shares a common API no matter the framework.

API for a <DatePicker />


  • minDate
  • maxDate
  • defaultDate
  • showWeeks
  • monthSteps