"<shadow> as function" as "slots"

gistfile1.html

<!-- For base combo-box class -->
<template>
  <style>… styles go here …</style>
  <div id="topPortion">
    <content select=".slot-inputElement">
      <input type="text">
    </content>
    <button id="dropdownButton">
      <content select=".slot-icon">
        <img src="downArrow.png">
      </content>
    </button>
  </div>
  <div id="dropdownPortion">
    <content select=".slot-dropdown">
      <!-- Base class doesn’t define choices that go in the dropdown. -->
    </content>
  </div>
</template>

<!-- instance -->
<combo-box>
  <img class=”slot-icon”>
  <div class="slot-dropdown">
    … Choices go here …
  </div>
</combo-box>

<!-- For date-combo-box, which inherits from combo-box -->
<template>
  <shadow>
    <content select=".slot-inputElement">
      <input type="date" class="slot-inputElement">
    </content>
    <content select=".slot-icon">
      <img src="calendarIcon.png" class="slot-icon">
    </content>
    <content select=".slot-drowdown">
      <month-calendar class="slot-dropdown"></month-calendar>
    </content>
  </shadow>
</template>


<!-- instance -->
<date-range-combo-box>
  <input type="date" class="slot-start">
  <input type="date" class="slot-end">
</date-range-combo-box>

<!— implementation of date-range-combo-box -->
<template>
  <date-combo-box>
    <div class='slot-inputElement'>
      <content select=".slot-start"></content>
    </div>
  </date-combo-box>
  <date-combo-box>
    <div class='slot-inputElement'>
      <content select=".slot-end"></content>
    </div>
  </date-combo-box>
</template>

I think the date-combo-box code doesn't need the <content> elements, does it? Its elements just need to have the right class attributes so that they'll get distributed to the correct content elements in the base class' shadow.

<!-- For date-combo-box, which inherits from combo-box -->
<template>
  <shadow>
    <input type="date" class="slot-inputElement">
    <img src="calendarIcon.png" class="slot-icon">
    <month-calendar class="slot-dropdown"></month-calendar>
  </shadow>
</template>