Как создать LitElement без Shadow DOM?
Я создаю веб-компоненты с помощью LitElement. Это из https://lit-element.polymer-project.org/guide/start
// Import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';
// Extend the LitElement base class
class MyElement extends LitElement {
/**
* Implement `render` to define a template for your element.
*
* You must provide an implementation of `render` for any element
* that uses LitElement as a base class.
*/
render(){
/**
* `render` must return a lit-html `TemplateResult`.
*
* To create a `TemplateResult`, tag a JavaScript template literal
* with the `html` helper function:
*/
return html`
<!-- template content -->
<p>A paragraph</p>
`;
}
}
// Register the new element with the browser.
customElements.define('my-element', MyElement);
Как создать LitElement без Shadow DOM?
createRenderRoot() { return this;} решил!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Просто чтобы убедиться, что этот вопрос отображается как ответ:
createRenderRoot позволяет переопределить операцию создания теневого корня. Обычно он используется для рендеринга в светлый дом:
createRenderRoot() {
return this;
}
Хотя его можно было бы использовать для рендеринга в другом месте.
Я действительно рекомендую использовать теневой DOM. Композиция сложна, если элемент перезаписывает свой собственный легкий DOM.
Как еще вы предлагаете использовать Bootstrap или другую таблицу стилей для всего веб-сайта?
В идеале ваши таблицы стилей разбиты на части, чтобы вы могли импортировать только те части, которые нужны каждому компоненту. Я бы обернул эти части в модули JS, чтобы их можно было автоматически загружать вместе с компонентами, связывать и т. д., а затем внедрять их в теневые корни.
кажется, что теневые корни нарушают поведение, видимое в фокусе.. весело
Переопределение примечания createRenderRoot сделает недоступными теневые функции DOM, такие как инкапсулированный CSS и слоты. Тогда какой смысл использовать веб-компонент?
Веб-компонент @TinaChen позволяет вам разбивать код на компоненты, что почти всегда является улучшением, если вы еще не используете React/Vue/Angular и т. д. Вы по-прежнему получаете инкапсуляцию. Кроме того, если у вас уже есть огромная база кода с множеством правил CSS, может быть сложно преобразовать стили для использования освещенного CSS. И есть много других мелких проблем, которые усложняют внедрение теневого DOM. Мы живем не в идеальном мире.
Если у него нет теневого DOM, это пользовательский элемент, а не веб-компонент.
Вы пытались указать
renderRoot? lit-element.polymer-project.org/api/classes/…