This is what Angular does, where an Angular component is typically rendered as a custom tag. I find it to be one of the (very) few nice things about Angular, as it can be helpful to track down components in a large codebase. I haven’t used React for many years, but makes me wonder if custom tags as a convention would be similarly useful.
You can make up HTML tags
41–50 of 202 posts
Re: You can make up HTML tags
#42Many years ago, I decided to reinvent the `blink` tag, because the monsters who make browsers removed support for it. I didn't know you could just make up tags, but I figured I'd give it a shot, and with a bit of jquery glue and playing with visibility settings, I was able to fix browsers and bring back the glorious blinking. I was surprised you could just do that; I would have assumed that the types of tags are fina…
I for one am glad that blink is no longer a thing, it's certainly behavior that should require more thought than a simple html element can provide.
I just kind of feel like removing it makes the internet less fun. 90's internet was basically a playground for geeky people to make things purely for fun, with basically no ambitions of making any money; people would host their own terrible web pages. My first real introduction to "programming" (other than making a turtle walk around) was when I was nine years old and bought "Make Your Own Web Page : A Guide for Kids" from my school, and this was something a nine year old kid could do because the web was easy and fun to program for. There weren't a billion JavaScript frameworks, CSS was new (if it was even supported), everything was done with tags and I loved it.
Yeah, the sites would be ugly and kind of obnoxious, but there was, for want of a better word, a "purity" to it. It was decidedly uncynical; websites weren't being written to satisfy a corporation like they all are now. You had low-res tiling backgrounds, a shitty midi of the X-files theme playing on a bunch of sites, icons bragging about how the website was written in Notepad, and lots and lots of animated GIFs.
I feel like the removal of blink is just a symptom of the web becoming more boring. Instead of everyone making their own website and personalizing it, now there's like ten websites, and they all look like they were designed by a corporation to satisfy shareholders.
Re: You can make up HTML tags
#43Hmmmm. On the one hand I kind of want to use any random tag and have it work. On the other hand ... # or versus I am not 100% sure, but I think I kind of prefer the div tag. I understand that it is not the same semantically, but I am using div tags and p tags a LOT. I avoid the new HTML tags for more semantic meaning as this adds cognitive load to my brain. I'd rather confine myself to div and p tags though - it is j…
> I understand that it is not the same semantically, but I am using div tags and p tags a LOT. I avoid the new HTML tags for more semantic meaning as this adds cognitive load to my brain.
Serious question: are you saying that an entire webpage using only div and p tags is easier for you to grok than if the same webpage used standard tags like article and blockquote?
You're leaving so much functionality on the table. It also sounds like you're not using ARIA either, so your site is inaccessible to users of assistive technology.
You could use roles on your div tags to give a screen reader a fighting chance:
…
…
…
…Re: You can make up HTML tags
#44Many years ago, I decided to reinvent the `blink` tag, because the monsters who make browsers removed support for it. I didn't know you could just make up tags, but I figured I'd give it a shot, and with a bit of jquery glue and playing with visibility settings, I was able to fix browsers and bring back the glorious blinking. I was surprised you could just do that; I would have assumed that the types of tags are fina…
I think you can do it fully in CSS these days! https://www.w3docs.com/tools/code-editor/13719 I modified `.blink` to `blink` so it will target the tag instead of the class and it seemed to work
This doesn't surprise me, I've seen a lot of cool stuff being done in CSS.
I've never been much of a frontend person, so gluing stuff together with JQuery was kind of my go-to until I was able to abandon the web.
Re: You can make up HTML tags
#45I've been doing this for about three or four years. Clever idea, tricky in practice. I don't think I'd recommend this approach broadly. But it works for me.
It's definitely possible to take it too far. When most tags in your HTML are custom elements, it creates new readability problems. You can't immediately guess what's inline, what's block, etc. And it's just a lot of overhead for new people to learn.
I've arrived at a more balanced approach. It goes something like this:
If there's a native tag, like or , always use that first.
If it's a component-like thing, like an or , then go ahead and use the custom tag. Even if it's CSS only, without JS.
If the component-like thing has sub-components, declare the pieces using slot attributes. There will be a great temptation to use additional custom tags for this, like inside . In my experience, a is a lot more readable. The nice thing about this pattern is that you can put slot attributes on any tag, custom or otherwise. And yes, I abuse the slot attribute even when I'm only using CSS, without JS.
Why bother with all of this? I like to limit my classes to alteration, customization. When I see a , it's easy to see where it belongs and what makes it unique.
Some of you will likely barf. I accept it. But this has worked well for me.
Re: You can make up HTML tags
#46This is how you can set default styles for all your custom elements:
:where(:not(:defined)) {
display: block;
}Re: You can make up HTML tags
#47Hmmmm. On the one hand I kind of want to use any random tag and have it work. On the other hand ... # or versus I am not 100% sure, but I think I kind of prefer the div tag. I understand that it is not the same semantically, but I am using div tags and p tags a LOT. I avoid the new HTML tags for more semantic meaning as this adds cognitive load to my brain. I'd rather confine myself to div and p tags though - it is j…
> I avoid the new HTML tags…
The HTML5 specification was released in 2014, so tags like article, section, header, figure, etc. have been around for more than a decade; they are not that new.
Re: You can make up HTML tags
#48Earlier quoted context omitted.
Something about Lit/web components that's not written clearly on the label is the hoops you have to jump through to style elements. If you're using tailwind in the whole app, you just want to pull it into your custom elements without much boilerplate. My main app compiles a single minified app.css, it felt not so modular to now include that in every single component. The alternative is create a subclass that injects…
> It'd be perfect it just had a switch to inherit everything the page already has. It does! https://lit.dev/docs/components/shadow-dom/ > By default, Lit renders into shadow DOM. This carries benefits like encapsulation (including the style encapsulation you mention). If you prefer global styles, you can render into light DOM instead with that one-line switch. However, shadow DOM is required for slotting (composing)…
I also made a simple lib to make it easy to implement common styles in your Lit components:
Re: You can make up HTML tags
#49the comments here informing us they default to behaving like instead of like is the biggest disappointment of my day so far
I think it makes sense that if HTML detects an unknown element that it doesn't give it block styling automatically. Only if you specifically specified it for that type of element.
Inline styling is kind of the default in HTML.
Re: You can make up HTML tags
#50But there's no real reason to, and it just adds confusion around which elements are semantic -- bringing formatting, functionality, meaning to screen readers and search engines, etc. -- vs which are custom and therefore carry no semantic meaning. If there's no native semantic tag that fits my purposes, I'd much rather stick to a div or span as appropriate, and identify it with one (or more) classes. That's what class…
Why would it create confusion? Because you're not familiar with it? Things change..