Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Templating in HTML

kittygiraudel.com

Post reply on HN
Print view View original

21–30 of 78 posts

Re: Templating in HTML

#21

Post by rokhayakebe »

labrador wrote: post #5

> Let’s start with the fact that do not enabling you to do anything that’s not possible otherwise. In that way, it’s more of a convenience tool really. If you have significant HTML structures that need to be injected at runtime, it might be very cumbersome to do so manually with document.createElement and element.setAttribute. I didn't expect the paragraph to end that way. I would write it: Let’s start with the fact…

I assume content within "display:none" will be read by search engines and viewed in source. Is read by search engines?

Re: Templating in HTML

#22

Post by colejohnson66 »

geuis wrote: post #14

Can't this be done more easily / programmatically via createDocumentFragment? https://developer.mozilla.org/en-US/docs/Web/API/Document/cr...

That's what the `` element does. From the HTML standard[0]:

> The template element can have template contents, but such template contents are not children of the template element itself. Instead, they are stored in a DocumentFragment associated with a different Document — without a browsing context — so as to avoid the template contents interfering with the main Document.

[0]: https://html.spec.whatwg.org/multipage/syntax.html#template-...

Re: Templating in HTML

#23

Post by recursive »

clairity wrote: post #3
icedchai wrote: post #2

In the jquery days, I would often do this sort of thing with hidden divs.

i remember doing stuff like that too, but now it's official! ha. it's exciting to see web standards (finally) taking direction from web developers rather than corporate interests, despite chrome being so prominent. as a random aside, i'm especially hoping forms get more love, like the common behaviors (datetime entry, combobox, validation/feedback, etc.) that every developer has to wrangle with over and over. and it'…

now? finally?

I've been using for almost a decade.

Re: Templating in HTML

#24

Post by cantSpellSober »

labrador wrote: post #5

> Let’s start with the fact that do not enabling you to do anything that’s not possible otherwise. In that way, it’s more of a convenience tool really. If you have significant HTML structures that need to be injected at runtime, it might be very cumbersome to do so manually with document.createElement and element.setAttribute. I didn't expect the paragraph to end that way. I would write it: Let’s start with the fact…

(along with ) allows for a declarative shadow DOM instead of clunky attachShadow()s on hidden s (which doesn't work server-side)

Otherwise you probably don't need , in fact they don't handle events the same as the rest of the DOM and will likely cause more pain

Re: Templating in HTML

#25

Post by ataylor32 »

kitsunesoba wrote: post #16
labrador wrote: post #5

> Let’s start with the fact that do not enabling you to do anything that’s not possible otherwise. In that way, it’s more of a convenience tool really. If you have significant HTML structures that need to be injected at runtime, it might be very cumbersome to do so manually with document.createElement and element.setAttribute. I didn't expect the paragraph to end that way. I would write it: Let’s start with the fact…

Front end web is not my forte, but as I understand display:none; can have unintended (usually negative) interactions with screen readers, which I don't believe is a possibility with HTML templates.

Are you sure? It's my understanding that screen readers know to ignore elements with display:none;

Re: Templating in HTML

#26

Post by cantSpellSober »

grimgrin wrote: post #18
kitsunesoba wrote: post #16

Earlier quoted context omitted.

Front end web is not my forte, but as I understand display:none; can have unintended (usually negative) interactions with screen readers, which I don't believe is a possibility with HTML templates.

There’s a way to hide from screen readers too if the OP was so inclined: https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

display: none hides the content from screen readers, as it is not rendered.

aria-hidden is for elements that were rendered but are hidden (it's redundant on elements with a display value of `none`)

Re: Templating in HTML

#27

Post by cantSpellSober »

verisimilidude wrote: post #9

The tag really shines when used alongside and the Shadow DOM. But I really wish there were an HTML-native way to load from separate files, the same way we do with CSS and JS. Not a show-stopper, but it’d be very nice to have.

Yes, I thought that's what this article would be about. Respectfully, the MDN reference for has more information than this post.

Re: Templating in HTML

#28

Post by [deleted] »

verisimilidude wrote: post #9

The tag really shines when used alongside and the Shadow DOM. But I really wish there were an HTML-native way to load from separate files, the same way we do with CSS and JS. Not a show-stopper, but it’d be very nice to have.

[deleted]

Re: Templating in HTML

#30

Post by imaginamundo »

cantSpellSober wrote: post #24
labrador wrote: post #5

> Let’s start with the fact that do not enabling you to do anything that’s not possible otherwise. In that way, it’s more of a convenience tool really. If you have significant HTML structures that need to be injected at runtime, it might be very cumbersome to do so manually with document.createElement and element.setAttribute. I didn't expect the paragraph to end that way. I would write it: Let’s start with the fact…

(along with ) allows for a declarative shadow DOM instead of clunky attachShadow()s on hidden s (which doesn't work server-side) Otherwise you probably don't need , in fact they don't handle events the same as the rest of the DOM and will likely cause more pain

I read an article about it that i liked a lot.

https://web.dev/declarative-shadow-dom/

I even tried to build a library around this, but still don’t know how to finish it hahaha.

https://github.com/imaginamundo/webcomponents

Post reply on HN