custom-element

问题 I have recently created a native web component which is working well in all browsers. I moved this web component into an Angular 6 application and all works as expected. I then tried to extend a native HTML element which again worked perfectly except when I brought it into my Angular 6 application. Using the examples from Mozilla I will try and illustrate my issue. Using the following trying to extend a native 'p' element: // Create a class for the element class WordCount extends

问题 Due to the renaming of some class methods (attached/detached to connected/disconnected) and removal of createdCallback in favor of constructors (which is a good thing!), I find myself writing my WebComponent base class (class-factory mixin) as follows. My question is, should I be doing what I'm doing, or do you recommend something else? Note that the attached/detachedCallback methods simply call the connected/disconnectedCallback methods, and also note what I've done with createdCallback and

问题 I'm working on an Angular 5 project and noticed some CSS properties are not inherited correctly from custom elements. For example, consider a custom component foo : @Component({ selector: 'foo', template: ` <form>inside form</form> <div>inside form</div> outside `, }) export class FooComponent { } Now, I want to alter its opacity and max-height : foo { opacity: 0.5; max-height: 0; overflow: hidden; } However, browsers seem to not inherit those properties correctly down to the form and div

问题 I have a bunch of custom HTML elements such ass bar-el, bar-el2, foo, foo-bar, foo-bar-2 . I can do the following: <bar-el class="custom-bar"> <foo class="custom-foo"> <foo-bar name="bar" class="custom-foo"> Content </foo-bar> <foo-bar2 name="bar2" class="custom-foo"> Content </foo-bar2> </foo> </bar> Unfortunately due to the code generation process it's not always possible to set class and other attributes for my custom elements, so I'd like to know if it's possible to write a CSS selector

问题 On MDN documentation, I see a function that WebComponents can implement called adoptedCallback . MDNs documentation states: "Invoked when the custom element is moved to a new document." https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements https://github.com/w3c/webcomponents/issues/512 What does it mean that the custom element has moved to a new document? Under what circumstances should I implement this? 回答1: The adoptedCallback( ) method is called when a Custom

问题 What is the difference between HTMLImports.whenReady and window.addEventListener('WebComponentsReady', function(e) { ? Polymer's official documentation says: "To define an element in your main HTML document, define the element from HTMLImports.whenReady(callback). callback is invoked when all imports in the document have finished loading." Webcomponents.org's official documentation on imports says: Under native imports, tags in the main document block the loading of imports. This is to ensure

问题 The spec says: However, note that connectedCallback can be called more than once, so any initialization work that is truly one-time will need a guard to prevent it from running twice. What does this mean? Is it saying that connectedCallback can be called more than one time (by the browser engine) before disconnectedCallback is ever called? If there is always one connectedCallback for every disconnectedCallback , then that statement is rather pointless. I will obviously clean up whatever I

问题 Is there a way to select all custom elements with CSS? I want to make all custom elements block elements by default (most browsers make them inline by default), and then override this as necessary. My rule may look something like this: *::custom { display: block; } All custom elements have dashes in the standard, so I could create a rule taking advantage of that, but it would be slower on many/most current browsers, as it would need to use regular expressions. If there were a built-in

问题 I am creating an angular element which is supposed to be embedded on multiple external sites. The embedding process will ofc just be a reference to the compiled script and a DOM element representing the element: <html> <head> <script src="element.js"></script> </head> <body> <element></element> </body> </html> But the problem is that the element makes use of a few assets in .png, .svg, .gif and .jpg format. And of course the compiled element used on a different site, cannot reference those

问题 I'm trying to build a custom element that will be consumed by an Angular app. The custom element will take a prop and potentially manipulate it. My understanding was that I could use the "banana in a box" to handle this binding, aka <custom-element [(foo)]="bar"> gets converted to <custom-element [foo]="bar" (fooChange)="bar = newBar"> , or the like. My Angular template: <an-el [(clicked)]="isClicked"></an-el> <p>Did you click a button? {{ isClicked }}</p> My custom element dispatches an