Estoy feliz de haber llegado tan lejos. Puedo tomar una plantilla, modificarla y luego agregarla a mi documento. Pero, ¿por qué no veo la estructura HTML completa en la consola cuando intento mostrar mi <template> ?

Conceptualmente, entiendo que estoy tratando con un fragmento de documento de alguna manera... Aún así, mi expectativa era ver la estructura del fragmento:

Mis plantillas:

 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>`; console.log('--basic modal template', template) console.log('--basic modal template content', template.content) return template.content; } export { basicModal };

Manejador modal

 import { basicModal } from './templates.js'; function renderRetireeForm() { const myTemplate = basicModal(); console.log('--myTemplate', myTemplate) myTemplate.querySelector('.modal').setAttribute('id', 'zzzModal') document.body.appendChild(myTemplate); // i open it later }