如何访问WebComponent属性？及自定义组件中this.getAttribute('data-text')返回undefined问题排查

The issue here is that you're trying to access element attributes directly in the custom element's constructor, which isn't reliable—especially in Firefox when running from the local file system (file:// protocol).

When a custom element's constructor runs, the browser has created the element instance, but it hasn't yet parsed and assigned the attributes defined in your HTML. This timing mismatch is more noticeable in Firefox's local file handling compared to other browsers or when running via a web server.

How to fix this #

You have two solid, cross-browser compatible solutions depending on whether you need to handle dynamic attribute changes or just initial setup:

1. Use connectedCallback (for initial setup)

The connectedCallback lifecycle method runs when your element is inserted into the DOM—at this point, all attributes from your HTML have been fully processed and are available to access.

Here's your revised code:

class Info extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    
    // Create base elements and save references as instance properties
    const wrapper = document.createElement('span');
    wrapper.setAttribute('class', 'wrapper');
    
    const icon = document.createElement('span');
    icon.setAttribute('class', 'icon');
    icon.setAttribute('tabindex', 0);
    
    this.infoElement = document.createElement('span');
    this.infoElement.setAttribute('class', 'info');
    
    this.imgElement = document.createElement('img');
    icon.appendChild(this.imgElement);
    
    // Add styles
    const style = document.createElement('style');
    style.textContent = `
      .wrapper {
        position: relative;
      }
      img {
        width: 1.2rem;
      }
    `;
    
    // Attach elements to shadow DOM
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(this.infoElement);
  }

  connectedCallback() {
    // Now safely access attributes
    const text = this.getAttribute('data-text');
    this.infoElement.textContent = text;
    
    this.imgElement.src = this.hasAttribute('img') 
      ? this.getAttribute('img') 
      : 'img/default.png';
  }
}
customElements.define('a-info', Info);

2. Use attributeChangedCallback (for dynamic updates)

If you need your component to react when attributes are changed after the element is inserted into the DOM, use attributeChangedCallback along with observedAttributes to specify which attributes to watch:

class Info extends HTMLElement {
  // Define which attributes to monitor
  static get observedAttributes() {
    return ['data-text', 'img'];
  }

  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    
    const wrapper = document.createElement('span');
    wrapper.setAttribute('class', 'wrapper');
    
    const icon = document.createElement('span');
    icon.setAttribute('class', 'icon');
    icon.setAttribute('tabindex', 0);
    
    this.infoElement = document.createElement('span');
    this.infoElement.setAttribute('class', 'info');
    
    this.imgElement = document.createElement('img');
    icon.appendChild(this.imgElement);
    
    const style = document.createElement('style');
    style.textContent = `
      .wrapper {
        position: relative;
      }
      img {
        width: 1.2rem;
      }
    `;
    
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(this.infoElement);
  }

  // Triggered when observed attributes change
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-text') {
      this.infoElement.textContent = newValue;
    } else if (name === 'img') {
      this.imgElement.src = newValue || 'img/default.png';
    }
  }

  // Ensure initial values are set on first insertion
  connectedCallback() {
    if (this.hasAttribute('data-text')) {
      this.infoElement.textContent = this.getAttribute('data-text');
    }
    this.imgElement.src = this.hasAttribute('img') 
      ? this.getAttribute('img') 
      : 'img/default.png';
  }
}
customElements.define('a-info', Info);

Why this works #

• connectedCallback guarantees that your element is part of the DOM, so all attributes from your HTML are ready to be read.
• attributeChangedCallback lets you handle both initial attribute values and any later changes, making your component more flexible.

This approach will work consistently across all modern browsers, including Firefox—whether you're running locally or from a web server.

内容的提问来源于stack exchange，提问作者Jiří Lechner