Dynamically change attribute value with split() (JavaScript)
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;