fix(pat-inject): Fix problem with inserting table rows. #1238
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Daniel reported a problem on signal concerning table-row injections. At one point in the current release cycle I had to add a temporary wrapper element to be able to load a string and treat it as a DOM element so that javascript functions can be used to identify elements.
I used a DIV.
However tr elements cannot be added to divs, therefore the table-row injection failed.
Solution in this Pull Request
A
<tr>
can live within a<template>
. Changing the temporary div to a template solves the issue.This temporary wrapper never makes it into the page, instead is only needed to transform an HTML string to a DOM node, so that we can do DOM operations, like
querySelectorAll
on it. That is used to find all images within the to-be-injected source and attach an event handler on it.After that operation, the tag is discarded again.
Technical note
There was a problem with injecting table rows introduced in: b0f94fb The problem occured when setting a table row as content of a temporary
<div>
wrapper. But a<tr>
is not a valid child node of a<div>
. This caused visually destroyed tables. Using a<template>
tag as wrapper instead of a div solved the problem.