Return to Answer

/* Create <option> tags */
class OptionTime extends HTMLSelectElement {
 constructor() {
 super();
 // Dynamically set the range 
 this.setDateRange();
 }

 setDateRange() {
 const now = new Date();
 const year = now.getFullYear();
 // There is no need to deconstruct the start, end and reassign
 const startYear = year - 50;
 const endYear = year - 18;
 // `this` give you access to HTML element. So no need for querySelector
  let unit = this.dataset.range.split(' ')[2];
 this.setAttribute('data-range', `${startYear} ${endYear} ${unit}`)
 }
 
 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>

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>