|
|
|
@ -1888,30 +1888,22 @@ export const template_visitors = {
|
|
|
|
|
let needs_special_value_handling = node.name === 'option' || node.name === 'select';
|
|
|
|
|
let is_content_editable = false;
|
|
|
|
|
let has_content_editable_binding = false;
|
|
|
|
|
let img_might_be_lazy = false;
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
if (is_custom_element) {
|
|
|
|
|
// cloneNode is faster, but it does not instantiate the underlying class of the
|
|
|
|
|
// custom element until the template is connected to the dom, which would
|
|
|
|
|
// cause problems when setting properties on the custom element.
|
|
|
|
|
// Therefore we need to use importNode instead, which doesn't have this caveat.
|
|
|
|
|
is_custom_element ||
|
|
|
|
|
// If we have an <img loading="lazy"> occurance, we need to use importNode for FF
|
|
|
|
|
// otherwise, the image won't be lazy. If we detect an attribute for "loading" then
|
|
|
|
|
// just fallback to using importNode. Also if we have a spread attribute on the img,
|
|
|
|
|
// then it might contain this property, so we also need to fallback there too.
|
|
|
|
|
(node.name === 'img' &&
|
|
|
|
|
node.attributes.some(
|
|
|
|
|
(attribute) =>
|
|
|
|
|
attribute.type === 'SpreadAttribute' ||
|
|
|
|
|
(attribute.type === 'Attribute' && attribute.name === 'loading')
|
|
|
|
|
))
|
|
|
|
|
) {
|
|
|
|
|
metadata.context.template_needs_import_node = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (const attribute of node.attributes) {
|
|
|
|
|
if (attribute.type === 'Attribute') {
|
|
|
|
|
attributes.push(attribute);
|
|
|
|
|
if (node.name === 'img' && attribute.name === 'loading') {
|
|
|
|
|
img_might_be_lazy = true;
|
|
|
|
|
}
|
|
|
|
|
if (
|
|
|
|
|
(attribute.name === 'value' || attribute.name === 'checked') &&
|
|
|
|
|
!is_text_attribute(attribute)
|
|
|
|
@ -1988,6 +1980,9 @@ export const template_visitors = {
|
|
|
|
|
// Then do attributes
|
|
|
|
|
let is_attributes_reactive = false;
|
|
|
|
|
if (node.metadata.has_spread) {
|
|
|
|
|
if (node.name === 'img') {
|
|
|
|
|
img_might_be_lazy = true;
|
|
|
|
|
}
|
|
|
|
|
serialize_element_spread_attributes(
|
|
|
|
|
attributes,
|
|
|
|
|
context,
|
|
|
|
@ -2039,6 +2034,11 @@ export const template_visitors = {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Apply the src and loading attributes for <img> elements after the element is appended to the document
|
|
|
|
|
if (img_might_be_lazy) {
|
|
|
|
|
context.state.after_update.push(b.stmt(b.call('$.handle_lazy_img', node_id)));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// class/style directives must be applied last since they could override class/style attributes
|
|
|
|
|
serialize_class_directives(class_directives, node_id, context, is_attributes_reactive);
|
|
|
|
|
serialize_style_directives(style_directives, node_id, context, is_attributes_reactive);
|
|
|
|
|