Hajime: As I indicated above, the scenario I'm facing is one where a component wants to dynamically import some content.
* From at aesthetic perspective, it feels bad for a component to have non-local effects on the document. * It also exposes some implementation details in the host DOM that are better obscured from the component host. I'd prefer for my component users to generally view my component as a black box that does something useful, and would rather not have them wonder why their document head suddenly has unknown <link> tags in it. * Finally, this limitation was slightly surprising to me, and might be too others. Given that I can have a static <link> in an imported document, I'd gotten the impression that I could put a <link> anywhere. This does not seems like a significant problem, but I still wanted to share my experience in case others were similarly confused, and offer it for your consideration. On Thursday, April 10, 2014 2:03:06 PM UTC-7, Hajime Morrita wrote: > > > > > On Thu, Apr 10, 2014 at 10:21 AM, Jan Miksovsky <[email protected]<javascript:> > > wrote: > >> It looks like dynamic HTML imports are now supported in both Canary >> (natively) and the polyfill. >> >> From experimentation, it appears that <link> tags programmatically added >> to the page's light DOM load as expected. However, links added to a shadow >> subtree are not handled and have no effect. >> >> Can someone please confirm if that analysis is correct? >> >> I tried looking through the spec, which talks about links being >> associated with the document, but it doesn't specifically say that links in >> shadow DOM are ignored, so I wanted to check. I ask because I have a >> component that wants to dynamically load another, and it appears to be able >> to do so in its light DOM but not its shadow. This to some extent cracks >> the opacity of the component's internal workings, so I'd been hoping to >> keep the dynamic links completely within the component's shadow. >> > > This is an interesting question. I filed https://crbug.com/362255 for > tracking this. > > Would you mind to explain how you intend to use <link rel=import> in > Shadow DOM? We could possibly make this work, but I'm not sure if this > should work. I don't see how it can be useful. In the context of dynamic > loading, we can just put newly created <link> into document.head, cannot we? > > Let's compare it to <link rel=stylesheet>. It works in Shadow DOM, and the > style is applied to the scope (shadow tree). For imports though, it make > less sense to bound it to the scope. Although we could imagine a scoped > import whose styleheets are loaded into the Shadow Tree, its benefit isn't > clear for me and it will introduce certain complexity to the design. > > If it isn't scoped to Shadow DOM, it doesn't make sense to have it in > Shadow DOM. Other things like <meta>, non-style <link>, <input>, etc. are > hidden from global document scope when it is in Shadow DOM. The current > behavior could be explained in this line. > > What do you think? > > -- > morrita > > > > > > >> >> On Friday, February 7, 2014 8:48:35 AM UTC-8, Eric Bidelman wrote: >> >>> Dynamic imports are now supported, but we haven't done a release yet >>> that includes it. >>> >>> +steve and +scott have a few demos they might be able to share. Both >>> show dynamic/async imports. >>> >>> >>> On Fri, Feb 7, 2014 at 4:29 AM, Matt Bourne <[email protected]> wrote: >>> >>>> Hi Eric >>>> >>>> It seems there is a similar question on stack exchange >>>> >>>> http://stackoverflow.com/questions/21607663/dynamically-load-web- >>>> components-html-imports/21627702#21627702 >>>> >>>> I wonder if one of the devs could given an updated answer. >>>> >>>> I understand that we can instantiate our custom elements just like >>>> normal elements at any time. The question is more around loading the html >>>> import for the element with all its css and js includes for example using >>>> ajax then when it's loaded add the polymer element. >>>> >>>> Obviously in a heavy single page web app design I only want to load the >>>> slideshow element (for example) if it's actually needed. In my use case I >>>> want users to be able to choose between many quite rich elements >>>> (flipbook, >>>> map, gallery, slideshow) I only want to load those elements if they are >>>> used. >>>> >>>> Matt >>>> >>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>> --- >>>> You received this message because you are subscribed to the Google >>>> Groups "Polymer" group. >>>> To unsubscribe from this group and stop receiving emails from it, send >>>> an email to [email protected]. >>>> To view this discussion on the web visit https://groups.google.com/d/ >>>> msgid/polymer-dev/edcd77c6-013a-4e98-bb36-1ea19ba3affa% >>>> 40googlegroups.com. >>>> >>>> For more options, visit https://groups.google.com/groups/opt_out. >>>> >>> >>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >> --- >> You received this message because you are subscribed to the Google Groups >> "Polymer" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/ce563e1c-e264-4df0-8515-28c7ab122b48%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/ce563e1c-e264-4df0-8515-28c7ab122b48%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> For more options, visit https://groups.google.com/d/optout. >> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/c60feb84-ad12-43a5-9c87-5a2db4567bbd%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
