search

WICG / element-timing

A proposal for an Element Timing specification.
https://wicg.github.io/element-timing/
Other
57 stars 15 forks source link

ElementTiming in CustomElements #61

Closed andyricchuiti closed 3 years ago

andyricchuiti commented 3 years ago

This is tangential to the ShadowDOM issue, but it's still one I wanted to ask about. Is it possible to include elementtiming as a part of a custom element who has a display: block (assuming we're not attaching a shadowRoot)?

While a solution would be to have the custom element extend HTMLDivElement, I don't think WebKit is supporting extending built-in elements.

npm1 commented 3 years ago

Is this for measuring text content? I think it should work as long as it's not in shadow DOM.

andyricchuiti commented 3 years ago

It is. I mean, I haven't tested images yet. At the core, I'm looking to see if there are ways for me to measure the render performance of either micro-frontends or custom elements at an organism level (from Atomic Design).

On this codepen, I have two custom elements: a-test without a shadowRoot but has a p tag in it, and b-test which does have a shadowRoot but no nested elements. I'm able to get the performance of b-test, but not a-test in chrome 91 (mac). I think this is reversed from my expectation. It seems like the check is really just failing if there's a nested element whether it's shadowRoot or not.

npm1 commented 3 years ago

I looked at your example, it looks like your CSS has a typo (display: bock). In addition, I changed the observer to use the buffered flag (obs.observe({type: 'element', buffered:true});). With these changes, I see the expected entry on A. Closing this but let me know if I missed something.

andyricchuiti commented 3 years ago

oh man, that's kinda embarrassing :D thanks for seeing that. that does solve the issue and that it does work with custom elements. thanks so much