@rxdi/lit-html 0.7.128 → 0.7.132
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,6 +6,30 @@ export interface CustomElementConfig<T> {
|
|
|
6
6
|
style?: CSSResult;
|
|
7
7
|
styles?: CSSResult[];
|
|
8
8
|
extends?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Intended only for first render inside the DOM
|
|
11
|
+
* for example we want app-component to be rendered
|
|
12
|
+
* inside body of the html page we could do
|
|
13
|
+
*
|
|
14
|
+
```
|
|
15
|
+
import { Component, html } from '@rxdi/lit-html';
|
|
16
|
+
|
|
17
|
+
@Component({
|
|
18
|
+
selector: 'app-component',
|
|
19
|
+
template() {
|
|
20
|
+
return html`
|
|
21
|
+
<router-outlet>
|
|
22
|
+
<navbar-component slot="header"></navbar-component>
|
|
23
|
+
<footer-component slot="footer"></footer-component>
|
|
24
|
+
</router-outlet>
|
|
25
|
+
`;
|
|
26
|
+
},
|
|
27
|
+
container: document.body,
|
|
28
|
+
})
|
|
29
|
+
export class AppComponent extends HTMLElement {}
|
|
30
|
+
```
|
|
31
|
+
*/
|
|
32
|
+
container?: HTMLElement | DocumentFragment;
|
|
9
33
|
}
|
|
10
34
|
export declare const Component: <T>(config: CustomElementConfig<T>) => <K extends new (...args: any[]) => {}>(Base: K) => {
|
|
11
35
|
new (...args: any[]): {
|
|
@@ -45,6 +45,21 @@ const customElement = (tag, config = {}) => (Base) => {
|
|
|
45
45
|
return this;
|
|
46
46
|
}
|
|
47
47
|
OnInit() {
|
|
48
|
+
if (config.container) {
|
|
49
|
+
(0, lit_html_1.render)(config.template.call(this), config.container);
|
|
50
|
+
if (config.style) {
|
|
51
|
+
const style = document.createElement('style');
|
|
52
|
+
style.type = 'text/css';
|
|
53
|
+
if (style['styleSheet']) {
|
|
54
|
+
// This is required for IE8 and below.
|
|
55
|
+
style['styleSheet'].cssText = config.style.toString();
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
style.appendChild(document.createTextNode(config.style.toString()));
|
|
59
|
+
}
|
|
60
|
+
config.container.prepend(style);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
48
63
|
return OnInit.call(this);
|
|
49
64
|
}
|
|
50
65
|
disconnectedCallback() {
|