angular-elements

问题 I'm getting a strange warning in VSCode( 1.44.0-insider ) with Angular9 in creating Angular Elements: export class AppModule { constructor(private injector: Injector) { const helloElement = createCustomElement(HelloComponent, {injector}); customElements.define('my-hello', helloElement); } ngDoBootstrap() {} } type of helloElement is not accepted with an error message from typescript: Argument of type 'NgElementConstructor' is not assignable to parameter of type 'CustomElementConstructor' 回答1:

问题 I'm getting a strange warning in VSCode( 1.44.0-insider ) with Angular9 in creating Angular Elements: export class AppModule { constructor(private injector: Injector) { const helloElement = createCustomElement(HelloComponent, {injector}); customElements.define('my-hello', helloElement); } ngDoBootstrap() {} } type of helloElement is not accepted with an error message from typescript: Argument of type 'NgElementConstructor' is not assignable to parameter of type 'CustomElementConstructor' 回答1:

问题 In webcomponents, we have two type of slots (named slots and default slots). We can easily style named slots by using syntax slot[name]::slotted(*) . But is there any way that we can style default slots because they don't have any name associated? The code is something like this and i'm using Angular Elements. <div class="topbar-item"> <slot class="icon" name="icon"></slot> <span class="text"> <slot></slot> <-- This is the slot i want to add styles, only if the slot has some data assigned.

问题 In webcomponents, we have two type of slots (named slots and default slots). We can easily style named slots by using syntax slot[name]::slotted(*) . But is there any way that we can style default slots because they don't have any name associated? The code is something like this and i'm using Angular Elements. <div class="topbar-item"> <slot class="icon" name="icon"></slot> <span class="text"> <slot></slot> <-- This is the slot i want to add styles, only if the slot has some data assigned.

问题 We have an Angular 7 project that generates a Custom Element with Angular Elements. This Custom Element is used in a React project and in an AngularJS project. When the code of the Custom Element is loaded in one of these projects, the site is slowed down by around 30% - even if the Custom Element is not rendered into the DOM! Performance analysis shows that the methods invokeTask() and runTask() from zone.js are called very often. I tried to blacklist the events as it is described in https:/

问题 I have two angular 9.1.1 project. The first one is to create an angular element and the other one is to use that element. Node: v12.16.2 NPM: 6.14.4 package.json { "name": "angular-element", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build:elements": "ng build --prod --output-hashing none && node build-elements.js" }, "private": true, "dependencies": { "@angular/animations": "~9.1.1", "@angular

问题 Is there any way to use css selectors like :first-child, :not(:last-child) inside of the shadow dom? The example is like this CustomElement.html <div id="parent-div> <slot></slot> </div> App.html <div> <custom-element> <div class="heading">Main Heading</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="heading">Second Heading</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="item">item 1</div> </custom

问题 Is there any way to use css selectors like :first-child, :not(:last-child) inside of the shadow dom? The example is like this CustomElement.html <div id="parent-div> <slot></slot> </div> App.html <div> <custom-element> <div class="heading">Main Heading</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="heading">Second Heading</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="item">item 1</div> </custom

问题 I have been playing around with Angular Elements and trying to achieve the best browser compatibility possible. However I seem to have hit a dead end, since when I add an IE polyfill for Shadow DOM, it breaks the Element in chrome. Initially I had the error 'Failed to construct HTML element', so I changed the 'target' in my tsconfig.json to es2015/es6. tsconfig.json { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration":

问题 I try to get Angular Elements working in IE11. My custom element (simple button) is already displayed and the input binding is working as expected, but the output binding doesn't. A click on my custom element button in IE 11 results in the error: The object doesn't support this action What I have done so far: Remove polyfill for custom elements that was added with ng add @angular/elements (didn't work properly with IE) Update all Angular packages to 7.2.1 Add the following polyfillls to