Dynamically change attribute value with split() (JavaScript)

Question

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 <option> tags */
class OptionTime extends HTMLSelectElement {
 constructor() {
 super();
 }
 connectedCallback() {
 let [start, end, unit] = this.dataset.range.split(' ');
 for (let i = start; i <= end; i++) {
 this.add(new Option(`${i}${unit}`, `${i}${unit}`));
 }
 }
};
customElements.define('option-time', OptionTime, {
 extends: 'select'
});

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

Answer 1

I hope this helps. Made some comments in the snippet.

/* Create <option> 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 <= endYear; i++) {
 this.add(new Option(`${i}${unit}`, `${i}${unit}`));
 }
 }
};
customElements.define('option-time', OptionTime, {
 extends: 'select'
});

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