Dynamically change attribute value with split() (JavaScript) What I want to do

Make my code cleaner.



What my code does

Thanks to Stack overflow, I finally wrote a code which creates option tags dynamically (OptionTime). The value of data-range attribute for Year was static. I wanted to set the years range dynamically, and I did it (See between //start and //End). However, I feel my code is lengthy. Can anyone make my code better, please?



Here is my code



// Start
/* Fetch DOM */
const selectYear = document.querySelector('select[name="Year"]');

/* Set years */
const now = new Date();
const year = now.getFullYear();
const startYear = year - 50;
const endYear = year - 18;

/* Change Year's data-range */
function overwriteYears() {
  let dataRange = selectYear.dataset.range;
  let [start, end, unit] = dataRange.split(' ');
  start = startYear;
  end = endYear;
  selectYear.setAttribute('data-range', `${start} ${end} ${unit}`);
}
overwriteYears();
// End

/* Create &lt;option&gt; tags */
class OptionTime extends HTMLSelectElement {
  constructor() {
    super();
  }
  connectedCallback() {
    let [start, end, unit] = this.dataset.range.split(' ');

    for (let i = start; i &lt;= end; i++) {
      this.add(new Option(`${i}${unit}`, `${i}${unit}`));
    }
  }
};
customElements.define('option-time', OptionTime, {
  extends: 'select'
});
&lt;select is="option-time" name="Year" data-range="%startYear% %endYear% 年"&gt;
  &lt;option value="" disabled selected&gt;Year&lt;/option&gt;
&lt;/select&gt;
&lt;select is="option-time" name="Month" data-range="1 12 月"&gt;
  &lt;option value="" disabled selected&gt;Month&lt;/option&gt;
&lt;/select&gt;
&lt;select is="option-time" name="Day" data-range="1 31 日"&gt;
  &lt;option value="" disabled selected&gt;Day&lt;/option&gt;
&lt;/select&gt;
I hope this helps. Made some comments in the snippet.

/* Create &lt;option&gt; tags */
class OptionTime extends HTMLSelectElement {
  constructor() {
    super();
    this.setDateRange();
  }

  setDateRange() {
    const now = new Date();
    const year = now.getFullYear();
    const unit = this.dataset.range.split(' ')[2]; 
    const startYear = year - 50; // No need to deconstruct start/end and assign years again.
    const endYear = year - 18;

    // `this` give access to HTML element directly.
    this.setAttribute('data-range', `${startYear} ${endYear} ${unit}`);

    for (let i = startYear; i &lt;= endYear; i++) {
      this.add(new Option(`${i}${unit}`, `${i}${unit}`));
    }
  }
};

customElements.define('option-time', OptionTime, {
  extends: 'select'
});


&lt;select is="option-time" name="Year" data-range="%startYear% %endYear% 年"&gt;
  &lt;option value="" disabled selected&gt;Year&lt;/option&gt;
&lt;/select&gt;
&lt;select is="option-time" name="Month" data-range="1 12 月"&gt;
  &lt;option value="" disabled selected&gt;Month&lt;/option&gt;
&lt;/select&gt;
&lt;select is="option-time" name="Day" data-range="1 31 日"&gt;
  &lt;option value="" disabled selected&gt;Day&lt;/option&gt;
&lt;/select&gt;