[#1641][commerce] using parent option in createTag, as well as innerHtml sometimes #1706
Conversation
npeltier
requested review from
VKniaz,
Axelcureno,
ryanmparrish,
yesil and
3ch023
as code owners
|
| const p = createTag('p', { class: 'action-area' }, null, { parent: footer }); | ||
| createTag('a', { slot: 'cta', is: 'checkout-link' }, null, { parent: p }); |
There was a problem hiding this comment.
Not sure how the render flow is or if it matters for your use-case, but you're appending a child to the footer, then appending another grandchild, this could lead to some minor CLS or other such issues. As in: footer is initially just <footer></footer> and already is an element added to the DOM. L10 makes it <footer><p class="action-area"></p></footer>, adds it to the DOM, causes some paints/reflows depending on styling. Then L11 makes it <footer><p class="action-area"><a slot="cta" is="checkout-link"></a></p></footer>, adds it to the DOM, causes another round of paint/reflow. It might be worth building the final element before appending it to the DOM. Same comment might be valid for L6-7
There was a problem hiding this comment.
i thought about that but as no "long" action is done was not believing such CLS could happen, is it really the case?
There was a problem hiding this comment.
+1 to @overmyheadandbody points.
We should attach the DOM elements at the end of the construction of their trees.
|
@npeltier , any update on this PR? |
|
closing for now :( too many changes on commerce ahead |
Test URLs: