Как создавать собственные элементы в HTML по требованию?
В настоящее время я добавляю некоторые пользовательские элементы для собственной структуры, однако я заметил, что мы получаем все элементы из индексного файла, чтобы использовать их внутри html.
Знаете ли вы лучший способ сделать это? как ленивое создание экземпляра.
текущий код:
customElements.define('element-a', ElementA);
customElements.define('element-b', ElementB);
customElements.define('element-c', ElementC);
customElements.define('element-d', ElementD);
customElements.define('element-f', ElementF);
....
Я хочу, чтобы это было по требованию, я нашел «способ» сделать это аннотацией для каждого класса, но это не по требованию, я хотел бы знать, есть ли что-то, что поможет вам проверить документ, посмотреть, нужно ли вам определенный элемент, затем определите его.. как по требованию
Я думаю, что пользовательский элемент должен быть определен до того, как вы разберете HTML, содержащий соответствующий тег. Поэтому я не думаю, что у вас есть способ дождаться загрузки HTML, прежде чем определять необходимые ему элементы.
Вы можете использовать регулярное выражение, которое ищет <\s*element-a\b в тексте HTML. Но это было бы хрупко.
И это будет работать только в том случае, если вы загружаете HTML динамически, присваивая его .innerHTML, а не при загрузке .html файла.
@Бармар, не мог бы ты объяснить это подробнее?
Что еще сказать? Вы не сможете загружать HTML с пользовательскими тегами, пока не определите пользовательские элементы. Таким образом, невозможно сделать определение элемента зависимым от уже загруженного HTML-кода.
Для пользовательских элементов нет автозагрузчика.
Все Бармары его высказывания неверны!!!. Вот JSFiddle, демонстрирующий, как работают веб-компоненты, когда JavaScript define поступает после этапа анализа DOM. jsfiddle.net/WebComponents/9txjfazc
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете найти пользовательские элементы, скрыть их, асинхронно загружать классы и обновлять элементы:
class CustomElement extends HTMLElement{
connectedCallback() {
const template = document.createElement("template")
template.innerHTML = /* html */ `
<style>
:host {
background-color: yellow;
}
</style>
<slot></slot>
`
const shadowRoot = this.attachShadow({ mode: "open" })
shadowRoot.appendChild(template.content.cloneNode(true))
}
}
const promises = {};
// you can also traverse DOM tree, could be faster
document.querySelectorAll('*').forEach(async el => {
if (el.tagName.includes('-')){
let display;
[{display}, el.style.display] = [el.style, 'none'];
const tag = el.tagName.toLowerCase();
const name = tag.replace(/^\w|-\w/gd, m => m.at(-1).toUpperCase());
// use something like import() to load a custom element class
let defined = true;
const factory = await (promises[name] ??= (
defined = false,
new Promise(r => setTimeout(() => r(eval(name)), 200))
));
defined || customElements.define(tag, factory),
el.style.display = display;
}
});<custom-element>Custom Element</custom-element><br/>
<custom-element>Second Element</custom-element>Хорошо, я нашел полезным решение «обхода дерева DOM», о котором вы упомянули. Итак, в основном пройдите по нему, если он найдет имя пользовательского элемента, то определите его. Это помогает во многих отношениях. Спасибо !
@Kisama329 Kisama329 я исправил код, чтобы не определять элемент несколько раз
Я не могу понять, какой вопрос вы задаете. Javascript, безусловно, может создавать элементы HTML «на лету», и я предполагаю, что именно это и делает ваш код.