I am trying to understand how using the Shadow DOM effects a components lifecycle methods in Stenciljs.
I have set up the following example in a Stencil starter app.
<body>
<my-app>
<component-a>
<component-c />
</component-a>
<component-b />
</my-app>
...
</body>
Components are defined as:
#Component({
tag: 'my-app',
styleUrl: 'my-app.css'
})
#Component({
tag: 'component-a'
})
#Component({
tag: 'component-b'
})
#Component({
tag: 'component-c'
})
Each component has console statements in each of its lifecycle methods. When the page loads in the browser without any of the components having the shadow DOM turned on.
09:30:00.603 my-app.js:19 my-app is about to be rendered
09:30:00.605 component-a.js:19 component-a is about to be rendered
09:30:00.606 component-c.js:19 component-c is about to be rendered
09:30:00.606 component-c.js:30 component-c has been rendered
09:30:00.607 component-a.js:30 component-a has been rendered
09:30:00.607 component-b.js:19 component-b is about to be rendered
09:30:00.608 component-b.js:30 component-b has been rendered
09:30:00.608 my-app.js:30 my-app has been rendered
Turning the Shadow DOM on in component-a alters the rendering.
#Component({
tag: 'component-a',
shadow: true
})
The Console output changes to :
09:33:22.840 my-app.js:19 my-app is about to be rendered
09:33:22.842 component-a.js:19 component-a is about to be rendered
09:33:22.843 component-b.js:19 component-b is about to be rendered
09:33:22.843 component-b.js:30 component-b has been rendered
09:33:22.844 component-c.js:19 component-c is about to be rendered
09:33:22.845 component-c.js:30 component-c has been rendered
09:33:22.845 component-a.js:30 component-a has been rendered
09:33:22.845 my-app.js:30 my-app has been rendered
component-b is now being rendered before both component-a and component-c are rendered. I am not sure how rendering the page with the Shadow DOM effects this change.
In my tests the render order can be one of three different ones on every request. I don't see any change when enabling Shadow DOM on any of the components.
I used the same 3 components and refreshed the page several times. These are the three different outputs:
Component A is about to be rendered
Component B is about to be rendered
Component B has been rendered
Component C is about to be rendered
Component C has been rendered
Component A has been rendered
-- Hard Refresh --
Component A is about to be rendered
Component C is about to be rendered
Component C has been rendered
Component A has been rendered
Component B is about to be rendered
Component B has been rendered
-- Hard Refresh --
Component B is about to be rendered
Component B has been rendered
Component A is about to be rendered
Component C is about to be rendered
Component C has been rendered
Component A has been rendered
In practice it probably won't matter which in order they're rendered as long as they follow the Lifecycle Hierarchy, which they do (at least for the componentDidLoad method).
Related
We display a tooltip on mouse enter that gives a hint about the field over which they hover. We would like to localize that text. All other localized text in the view is localized using resource bundles and are loaded using something like #Localizer"My text"). But on mouse enter the text is rendered by the js. SO how does one localize that in a razor view.
So i was trying yo create a simple auto scrolling view with iCarousel.
i made 4 view with image in the centre to be visible,
using the
func carousel(carousel: iCarousel, viewForItemAtIndex index: Int, reusingView view: UIView?) -> UIView
and log the index view that are currently rendered,
i test it on ipod touch / iphone 5 / iphone 6, and every view get rendered as the log printed
current index rendered 0
current index rendered 3
current index rendered 2
current index rendered 1
but when i try it on iphone 6+, the log just print :
current index rendered 0
current index rendered 3
current index rendered 1
is it just the carousel? i doubt it.. thats why, what should i do to make the carousel rendered the 3rd view (2)?
because on func numberOfItemsInCarousel(carousel: iCarousel) -> Int, i return the count of my image array.
thanks
Sorry, it seems it was the natural behaviour of the carousel of the reused view.
when it was on 5 or 6, the dimension of the view allow it to be all rendered when initialized, so the reuse view is not needed.
but when it was on 6+, the dimension is larger and it makes the carousel to render just 3 item : the current, the front/right and the back/left (if wrap is enabled, and my setting is enabled)
then i came to realize that im doing it wrong when reuse the view.
what i did before was to get the UI components then recreate their rect.
while the example didn't do that.
so my solution was to not recreate the rect and just change the image attribute of the UIViewImage of the subview
I have some partial views that are rendered sequentially. I would like to create a log of what has rendered successfully on the top of the page, when the last partial view has completed. The only way I can think of, is to keep an array of log details and then display the log detail in a partial view on the top of the page, using a rendersection.
This to me seems cumbersome, I would prefer to be able to use HttpResponse.Write to display it to the page. However this way I don't seem to be able to control the ordering of where my log will appear on the screen. I would like them to be displayed in the same location on the page. Is there a more elegant solution?
Why not put div in the top of the page and every Partial View write to that div?
<div id=log > <label id="logs"> The Log: </label> </div>
$('#logs').after('what you want1'); // from partial 1
$('#logs').after('what you want2'); // from partial 2
$('#logs').after('what you want3'); // from partial 3
$('#logs').after('what you want4'); // from partial 4
Pass the partial view the data you want to "log" in the Model\ ViewBag and start logging!
I have a complex asp.net mvc view where I load an "ascx" partial view into a div using $.ajax(). So I was wondering about the accessibility of the DOM elements contained in the main page and the ascx partial view. Using jQuery selectors, can I find an element in the main page from the ascx partial view? and the other way round?
Both ways, depending on the point on time.
You can always access the elements from the main view, since the HTML is bound at render-time (e.g $(document).ready())
You won't be access the elements in the partial view from the parent view until the callback from the $.ajax method has completed successfully and you have binded the HTML to the DOM (with .html(result) for example).
Well here's the problem:
I have a PHP index page which uses show/hide layers javascript. I am using the on menu.click function to show and hide content relevant to each menu. On.click all divs are hidden except the content for that menu item , which fades in. The content relating to each menu item are displayed within separate DIVS. The property is applied to all the text within all the divs.
See: http://jobe-group.com/jobeco/uk/2010live/dynamic/content/index.php#
The trouble is that SIFR only appears to be applied to the displayed on.load when the page is first loaded. When this is hidden and the other s shown through the "show" function they load in classic CSS fonts without the SIFR applied.
Is this unavoidable with the SIFR setup. Or am I not calling the divs properly. I have set the SIFR to apply to the selector and indeed it works fine on the for the displayed on load. It doesn't work for the within other . In theory I would think its possible to load the SIFR on all divs on page.load even if those divs are presently visibility:hidden.
What's the verdict on this?
Hope someone can help.
Cheers,
John
After you show the previously hidden div, execute the sIFR.replace calls again to replace the content in those elements.