Cách nhận lại cuộc gọi khi phần tử tùy chỉnh * và con của nó * đã được khởi tạo

Question

Tôi đang lồng các phần tử tùy chỉnh. Tôi muốn có các phần tử tùy chỉnh và các thuộc tính tùy chỉnh của cha mẹ từ nguyên mẫu của phần tử tùy chỉnh con của nó. Ví dụ.

<script>  
var ChildElement = Object.create(HTMLElement.prototype); 

ChildElement.getName = function() { 
    return "Bob"; 
} 

document.registerElement("child-element", { 
    prototype: ChildElement 
}); 

var ParentElement = Object.create(HTMLElement.prototype); 

ParentElement.createdCallback = function() { 
    var self = this; 
    setTimeout(function() { 
    // This logs 'Bob', correctly 
    console.log(self.childNodes[0].getName()); 
    }, 0); 

    // This explodes - getName is not defined. 
    console.log(self.childNodes[0].getName()); 
}; 

document.registerElement("parent-element", { 
    prototype: ParentElement 
}); 
</script> 

<parent-element><child-element></child-element></parent-element> 

Như đã lưu ý nội tuyến, phụ huynh không thể đọc bất kỳ thứ gì được xác định trên nguyên mẫu của phần tử con. Nó có thể nếu nó bắn một setTimeout ngay lập tức mặc dù; nó chỉ cần đợi cho đến khi các nút con của phần tử này cũng được thiết lập.

Có vẻ điều này xảy ra vì thứ tự gọi lại trong quá trình tạo phần tử, mà tôi nghĩ là một cái gì đó như:

• nguyên mẫu của cha mẹ được thiết lập (từ phần tử html để parentElement)
• createdCallback của cha mẹ được gọi là
• Thuộc tính đính kèm của phụ huynh được gọi là
• Nguyên mẫu của trẻ được đặt (từ HTMLElement thành ChildElement)
• Trẻ em được tạoCallback là cal dẫn
• attachedCallback của đứa trẻ được gọi là

Đó cháy createdCallback vào thời điểm này có ý nghĩa, nhưng như xa như tôi có thể nói không có callbacks sẵn tại tất cả hỏa hoạn rằng khi tất cả trẻ em của bạn đã được tạo ra. Tôi nghĩ rằng điều đó có nghĩa là không thể làm bất cứ điều gì về sáng tạo sử dụng nguyên mẫu của các phần tử con của bạn, mà không sử dụng setTimeout để chờ cho toàn bộ trang kết thúc hiển thị.

Có bất kỳ cuộc gọi lại hoặc sự kiện nào bạn có thể nghe từ phụ huynh hay không, để kích hoạt chỉ khi nguyên mẫu của tất cả các nút con của bạn cũng đã được đặt? Có cách tiếp cận khác cho phép bạn sử dụng các cấu trúc như thế này không? Có điều gì khác bạn có thể làm, ngoài việc kích hoạt một setTimeout?

Tôi tin rằng các yếu tố tùy chỉnh được thiết kế để cho phép tham số hóa với nội dung phần tử khác và có các yếu tố tùy chỉnh không được hỗ trợ hiệu quả trong nội dung đó khá đáng ngạc nhiên.

Có thể cho rằng đây có thể được coi là bản sao của Prototype not defined when accessing children on creation of custom-tag. Tuy nhiên, câu hỏi đó không đúng với các ví dụ bị hỏng và câu trả lời duy nhất xuất hiện thực sự là lỗi triển khai chứ không phải giải pháp (hoặc ít nhất, nó không còn là hành vi trình duyệt hiện tại nữa)

Answer 1

Thực tế, có nhiều cách khác nhau để đạt được điều này với các yếu tố tùy chỉnh lồng nhau.

Cách trực tiếp là thêm một callback tùy chỉnh để các yếu tố phụ huynh sẽ được gọi bởi các phần tử con từ phương pháp attachedCallback của nó:

ParentElement.childAttachedCallback = function() 
{ 
    console.log(this.childNodes[0].getName()) 
} 

ChildElement.attachedCallback = function() 
{ 
    this.parentElement.childAttachedCallback() 
} 

Trong một kịch bản phức tạp bạn có thể sử dụng thay vì:

• a Promise đối tượng do cha mẹ đặt và giải quyết bởi một hoặc nhiều trẻ em,
• Sự kiện tùy chỉnh do trẻ em bắn và bị cha mẹ bắt,
• a MutationObserver đối tượng được đặt để quan sát các thay đổi trong danh sách con của cha mẹ ...