A great feature of Web Components, or rather even HTML, is the ability to transparently wrap existing content with new content. Thanks to this, you can modify the existing legacy code practically non-invasively, as well as structure the new one elegantly.
Specifically, if you wrap some layout with your custom element (google.Custom Elements), then configuring in the connectedCallback () hook, your element can determine what subelements it has inside and configure its own and their work accordingly if you need to adapt them to new requirements and it will be quite an architecturally competent decision. It will also receive pop-up events from its subelements, and if you have enabled shadow tree isolation, it will become their uncontested broker (and if you have not enabled it, a transparent proxy). beyond it, they will not emerge and all responsibility will fall on him.
"WebComponents ", https://habr.com/ru/post/461153/ .
?
, , . .. - . , , , , . .. , , , /, .. , - .
IoC-, .. . Java , . .. ( ;). , , , , . , HOST, 20 , -, , , HOST , Search & Replace.
, , , . , , , , API - ( “” Spring Boot).
, , , Angular Composite API Vue. JSX React Context API “ ”, .. . IoC “” , .
Angular -, . injection-js typescript. , , , . -, - .
, . , , - , , , , .
- . ! - :
mkdir testioc
cd testioc
npm init
-
npm i skinny-widgets --save
index.html
body
<sk-config
theme="antd"
base-path="/node_modules/skinny-widgets/src"
></sk-config>
<script src="/node_modules/skinny-widgets/dist/sk-compat-bundle.js"></script>
<script type="module">
import { Registry } from "/node_modules/skinny-widgets/complets/registry.js";
window.registry = window.registry || new Registry();
registry.wire({
SkConfig: { def: SkConfig, is: 'sk-config'},
SkButton: { def: SkButton, is: 'sk-button'},
});
</script>
sk-config , , - . , ( ) , is customElements. , , .
window.registry = window.registry || new Registry(); , , , - “ ”.
<sk-button>Open</sk-button>
npx http-server
, : .
.
<script type="module">
import { Registry } from "/node_modules/skinny-widgets/complets/registry.js";
import { MyDialog } from "./my-dialog.js";
window.registry = window.registry || new Registry();
registry.wire({
SkConfig: { def: SkConfig, is: 'sk-config'},
SkButton: { def: SkButton, is: 'sk-button'},
myDialog: { def: MyDialog, is: 'my-dialog' },
});
</script>
<sk-button>Open</sk-button>
<my-dialog>This is my dialog</my-dialog>
SkDialog , . my-dialog.js .
export class MyDialog extends SkDialog {
}
. , “” click open() . HTML -, , .
- MyView customElements. . my-view.
my-view.js :
export class MyView extends HTMLElement {
bindDialog() {
if (this.dialogCfg) {
let button = this.querySelector(this.dialogCfg.buttonSl);
let dialog = this.querySelector(this.dialogCfg.dialogSl);
if (button) {
button.addEventListener('click', (event) => {
dialog.open();
});
}
}
}
render() {
this.bindDialog();
}
connectedCallback() {
this.render();
}
}
.. .
, - connectedCallback(), .
render(), bindDialog() - .
bindDialog() click . ,
this.dialogCfg
, .
<script type="module">
import { Registry } from "/node_modules/skinny-widgets/complets/registry.js";
import { MyDialog } from "./my-dialog.js";
import { MyView } from "./my-view.js";
window.registry = window.registry || new Registry();
registry.wire({
SkConfig: { def: SkConfig, is: 'sk-config'},
SkButton: { def: SkButton, is: 'sk-button'},
dialogCfg: { buttonSl: '#dialogButton', dialogSl: '#dialog' },
myDialog: { def: MyDialog, is: 'my-dialog' },
myView: { def: MyView, deps: { dialogCfg: 'dialogCfg' }, is: 'my-view' },
});
</script>
<my-view>
<sk-button id="dialogButton">Open</sk-button>
<my-dialog id="dialog">This is my dialog</my-dialog>
</my-view>
, . , , . :
, , HTML , . HTML, javascript . , .
-:
Material WebComponents - https://habr.com/ru/post/462695/
Quick start with WebComponents - https://habr.com/ru/post/460397/