Web组件:访问自定义组件类中的阴影DOM

在此项目中，我正在尝试创建一个将以映射为单位的自定义组件。我仍在通过W3C文档和几个YouTube视频来学习Web组件的基础知识。

主要问题是，在组件类中，有一个称为 attributeChangedCallback()的函数，每次属性更改时，都会触发这些属性，这些属性包含在observedAttributes()函数中，并在设置它们之后(前面提到的功能(我尝试通过选择器访问Shadow dom(将组件加载到HTML身体元素中后将被触发的connectedCallback()(。但是，如果我这样做，可变内容为null。

应加载attributeChangedCallback() 加载内容，因此我不明白为什么会发生这种情况，并且每次属性更改时我都需要访问此元素，以便我可以更新其内容。奇怪的事实：如果我每次执行attributeChangedCallback()时都会记录两次日志(因为我有两个属性正在观察(。

这是片段：

class GeoComponent extends HTMLElement {
	constructor() {
		super();
		this.shadow = this.createShadowRoot();
		this._latitude = 0;
		this._longitude = 0;
	}
	get latitude(){
		return this._latitude;
	}
	get longitude(){
		return this._longitude;
	}
	set latitude(val){
		this.setAttribute('latitude', val);
	}
	set longitude(val){
		this.setAttribute('longitude', val);
	}
	static get observedAttributes(){
		return ['latitude', 'longitude'];
	}
	
	attributeChangedCallback(name, oldVal, newVal){
		let geoComp = this.shadow.getElementById('geo');
		console.log(geoComp);
		switch(name){
			case 'latitude':
				this._latitude = parseInt(newVal, 0) || 0;
				// geoComp.innerHTML = `${this.latitude}, ${this.longitude}`;
				break;
			case 'longitude':
				this._longitude = parseInt(newVal, 0) || 0;
				// geoComp.innerHTML = `${this.latitude}, ${this.longitude}`;
				break
		}
	}
	connectedCallback(){
		let template = `
			<div class="geo-component" id="geo">
				
			</div>
		`;
		this.shadow.innerHTML = template;
	}
}
window.customElements.define('geo-component', GeoComponent);

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="geoComponent.js"></script>
</head>
<body>
	<h1>Geo-Component</h1>
	<geo-component latitude="12" longitude="-70"></geo-component>
</body>
</html>

update

就像将this.createShadowRoot();更改为this.shadow = this.attachShadow({mode: 'open'});(从Shadowdom V0到V1(之后提到的@acdcjunior一样，考虑到connectedCallback()功能仅在场景后面执行，并且一次。

。

attributeChangedCallback()被调用时(观察到的(属性为初始化(声明性地，这是您的情况( ，添加，更改或删除。这意味着它在connectedCallback()之前被调用。

通常，我们使用constructor((创建DOM：

名称：构造函数
何时创建元素的实例 或升级。对于初始化状态，设置事件有用听众，或创建阴影DOM 。有关限制的规格您可以在构造函数中做什么。

我将您的逻辑移至它。

您也使用Shadowdom V0。将其更新为V1(attachShadow而不是createShadowRoot(。

更新的演示：

class GeoComponent extends HTMLElement {
  constructor() {
    super();
    console.log('constructor called');
    
    this.attachShadow({mode: 'open'});
    this._latitude = 0;
    this._longitude = 0;
    
    let template = `
			<div class="geo-component" id="geo">
			</div>
		`;
    this.shadowRoot.innerHTML = template;
  }
  get latitude() {
    return this._latitude;
  }
  get longitude() {
    return this._longitude;
  }
  set latitude(val) {
    this.setAttribute('latitude', val);
  }
  set longitude(val) {
    this.setAttribute('longitude', val);
  }
  static get observedAttributes() {
    return ['latitude', 'longitude'];
  }
  attributeChangedCallback(name, oldVal, newVal) {
    console.log('attributeChangedCallback() called:', name, ':', oldVal, '->', newVal);
    let geoComp = this.shadowRoot.getElementById('geo');
    console.log(geoComp);
    
    switch (name) {
      case 'latitude':
        this._latitude = parseInt(newVal, 0) || 0;
        // geoComp.innerHTML = `${this.latitude}, ${this.longitude}`;
        break;
      case 'longitude':
        this._longitude = parseInt(newVal, 0) || 0;
        // geoComp.innerHTML = `${this.latitude}, ${this.longitude}`;
        break
    }
  }
  connectedCallback() {
    console.log('connectedCallback() called');
  }
}
window.customElements.define('geo-component', GeoComponent);

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="geoComponent.js"></script>
</head>
<body>
  <h1>Geo-Component</h1>
  <geo-component latitude="12" longitude="-70"></geo-component>
</body>
</html>

相关内容

最新更新

热门标签：