Problem
I wrote this code, it actually works, and I’m going to use this strategy in an active project that’s due in January.
I don’t know web components yet — the best I can personally utilize is <template> and DocumentFragment. But, I don’t think I need the latter.
My goal was to use modules with HTML templates that I can pull in, change values (like form inputs, element attributes, etc).
I’m not using DocumentFragment at all, since I already return a document fragment with return template.content.
Am I still in compliance with this statement, considering the strategy I’m using?
Changes made to the fragment don’t affect the document (even on reflow) or incur any performance impact when changes are made.
Is there a more acceptable way to ingest templates, modify them, then append it to the DOM?
templates.js
function basicModal() {
const template = document.createElement('template');
template.innerHTML = `
<div id="someModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>`;
return template.content;
}
export { basicModal };
Modal/Form Handler
import { basicModal } from './templates.js';
function renderRetireeForm() {
//get the template
const myTemplate = basicModal();
//modify the contents of the modal here
//add some Forms to this structure (not shown)
//I can change the input values, too
myTemplate.querySelector('.modal').setAttribute('id', 'zzzModal')
//append the template to the DOM
document.body.appendChild(myTemplate);
// get a reference to what I just appended to the DOM
const myModal = document.getElementById('zzzModal');
// bootstrap stuff for dealing with the Modal that I just appended
myModal.addEventListener('shown.bs.modal', function (event) {
console.log('--the modal is open')
// do more stuff to the modal if desired
});
myModal.addEventListener('hidden.bs.modal', function (event) {
console.log('--the modal is closed removed')
$(this).remove();
});
const modal = new bootstrap.Modal(myModal, {
backdrop: true,
keyboard: true,
focus: true,
})
modal.show()
}
export { renderRetireeForm };
Solution
I don’t think you are using <template> right.
It was created so that you can have templates in your HTML code without you having to hide those templates. In your case you could have used <div> and it would have had little or no impact.
Other than that,
-
I think some of your comments are too obvious (
//get the template) -
You are too generous with newlines
-
The prefix of
myin variable names seems odd, whymy? -
This
const modal = new bootstrap.Modal(myModal, { backdrop: true, keyboard: true, focus: true, }) modal.show()could be
(new bootstrap.Modal(myModal, { backdrop: true, keyboard: true, focus: true, })).show()