I'm trying Polymer 2.0 for a project and I want to include custom elements inside a custom element (using an unnamed slot):
<my-overview-element>
<my-child-element1></my-child-element1>
<my-child-element2></my-child-element2>
<my-child-element3></my-child-element3>
</my-overview-element>
When loading the page with my-overview-element the child elements are not visible. I do find them under the my-overview-element shadowRoot in DevTools but they are not rendered on the page (it seems they are not recognized as custom elements).
When navigating to another page containing <my-child-element1> (not as a child of a custom element) and then back to the overview page, the child element becomes visible. The same goes for my-child-element2 and 3. On their own pages the child elements are working fine.
Do I need some special commands to render custom elements as slotted children of another custom element? I tried lazy-importing them in the overview page but that doesn't help.
Did you properly load all of them with something like this
<link rel="import" href="my-child-element1.html">
<link rel="import" href="my-child-element2.html">
<link rel="import" href="my-child-element3.html">
Thanks for your replies and suggestions.
The problem was lazy-import: it seems to be a bit too lazy for importing child elements. Because it works for the main element on the page I didn't suspect lazy-import to be the culprit.
Using regular import for these elements solves the problem.
Related
I do have problems understand the tag </main>.
The project im looking at only has one </main> closing tag at the end, it has no opening tag of <main> which confuses me in the first place. It also has main {} in CSS. In order to try to understand what it does, I have played around with it a little.
As I comment out the </main> in html, absolutely nothing changes, which I understand if it has only informativ character, but the part where I get confused is, what is the main {....} in the CSS referring to, since when I comment this out, it will mess up the styling of the hole page.
edit: Since it seems to be unclear what my problem is: The problem is, that main {.....} in CSS does (!) influence the styling of the site, even without an opening <main> tag in html, and even without ANY <main> tag in html (for example if I remove the </main> tag in html.
How can a main {....} in CSS have influence on the styling, if there isn t even any <main> tag in the html whatsoever?
main{...} in css reffers to the styling of the main tag.
More about the element css selector
https://www.w3schools.com/cssref/sel_element.asp
You can learn more about the main tag here
https://www.w3schools.com/TAgs/tag_main.asp
And more about css selectors here
https://www.w3schools.com/cssref/css_selectors.asp
Also note that the main tag must have opening amd closing tag
You have to either add a tag, or remove main{...}.
The tag specifies the main content of a document.
The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: There must not be more than one element in a document. The element must NOT be a descendant of an , , , , or element.
just refers to the main content of the page, it does nothing. Main{...} is styling in the CSS page.
I'm in a bit of a trouble and I hope that I'll find the answer here:
I have an angular 5 app using polymer 2 components.
First I add the elements dynamically the head of the dom like this
<link id="ace-widget-link" rel="import" href="https://lostinbrittany.github.io/ace-widget/components/ace-widget/ace-widget.html">
Then the user select some elements to add to his dashboard
What I do is to append the element tag to the dom like so <ace-widget></ace-widget>
Now here comes the problems:
The first element that I add is only displayed when I refresh the page.
If add two or more elements only the first one appears (even after refresh).
Note that when I added the links statically to index.html everything worked fine.
So after all I figured it out, I was using some polymer components of different versions which produced a conflict that was the origin of the whole problem.
Note that another thing that helped is adding each import link only when the widget is inserted instead of adding all the links at once before the widget adding begins.
I hope that this helps someone else.
I have a v-if on a tag <span v-if="someValue"> which I want to start hidden and only become visible once the value in someValue is set to true. Unfortunately even if the value false from the start it still flashes up when loading the page (probably before Vue has time to remove the tag).
Is there a nice way to deal with this issue?
The initial "flashing" is not actually related to the v-if.
It is due to the fact that you first load the dom and then vue js will "manipulate" it. Vue is loaded after your html markup and therefore you will see everything until vue js is finally loaded and will hide elements according to your code.
To get rid of this you can place a v-cloak directive on one of your outer elements and add a css like
[v-cloak].class-of-my-outer-element {
display: none;
}
the v-cloak "attribute" will be removed by vue after it is initialized. that means nothing is shown until your code is ready.
Minor update / edit : Don't forget the v-cloak element needs to be inside if your #app or whereever you mount your vue application.
I am working with angular 2 rc4 and we are using fuel-ui http://fuelinteractive.github.io/fuel-ui/#/ to load a modal.
What we are trying to achieve is the following:
we have a login component that we want to inject into the fuel-ui modal the problem is that the actual modal html code (actual DOM) is getting loaded after.
Fuel-ui gives a tag into which the html for the modal gets loaded into.
I have researched and tried DynamicComponentLoader although found out it is now deprecated.
What I need is to know what is the best way to inject my login component content
into the rendered DOM (tag with modal-body class from bootstrap html).
I have searched but perhaps someone had the same issue and stumbled upon a better link that explains how to do this.
Thank you, in advance, for your help.
Nancy
This seems very old now. But i think the latest in Angular helps you use content projection into a component.
You can add <ng-content></ng-content> as the body of your modal. In the parent component view add your custom component wrapped in the modal component. When modal shows up, you will have your component in it's content.
Also, Angular supports dynamic component creation.
Component templates are not always fixed. An application may need to
load new components at runtime.
You can look it up here for any help:
dynamic-component-loader
I'm using angular 2 in my web application.
My application uses a lot of bootstrap modals.
I noticed that the modals contained inside a sub-route component are not showed correctly.
Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.
This is a screenshot:
As you can see the backdrop is above the dialog. This happen only on mobile devices.
What am I doing wrong?
I would avoid to keep all the modals inside the navbar and then open them with global events...
Thanks a lot
EDIT: I found this document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body> tag, or even better in a top-level position
in the document just after the opening <body> tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?
I fixed the problem using the following javascript code:
$('#myModal').appendTo("body").modal('show');
Thanks to Adam Albright for his post.