[Proposal] new <ignore> element HTML

Most of the time we come to a need of a tag which should be ignored by CSS Selector (no impact of item while styling). We face this kind of issue multiple times and and try to solve it by multiple hack or monkey-patch by altering DOM e.g.

• angular-1.x custom directive with attribute replace:true

• ng-template tag in angular 2,4,5 +

• Some custom directive/component which appends inner content in parent DOM

But if we have some tag which is totally ignored by CSS Selector while DOM rendering it should be big help for us.

Let me know your thought about it.

Will display: contents satisfy your usecase?

Agreed, but if it is added in tag it will enlarge it’s uses similarly we did with some other tags even if we had it’s CSS available. It’s really sad only Firefox had implemented it till now while developers struggles for it in different libraries/frameworks. If it comes as tag it might trigger an attention

Agreed, but if it is added in tag it will enlarge it’s uses similarly we did with some other tags even if we had it’s CSS available.

The problem is, it shouldn’t be an HTML Element. You’re asking for something that specifically deals with styling. Therefore, it should go in CSS. The exact request is something to style it in a certain way while leaving it accessible fully in the DOM. That’s what CSS does.

And asking for a new element get added while acknowledging display: contents does what you want seems awkward. Instead of pushing to get the current solution more widely supported than it currently is, you want to introduce a whole new thing in another specification that everyone needs to analyze, implement, and support.

It sounds to me like you’d be better off advocating display: contents; get more widely supported instead of trying to introduce a whole new thing to do this.

Side note: ng-template already looks to me like it is just a custom implementation of the existing template element. So, if that is the functionality you’re looking for, it’s already done. This creates a section of markup that the contents are ignored in the DOM and styling. Then as you want to use it, you copy the contents and insert it into the page.

That’s incorrect. display: contents; already got implemented in all major browsers except Edge. See https://developer.mozilla.org/en-US/docs/Web/CSS/display and https://caniuse.com/#feat=css-display-contents. It just didn’t land in all stable versions yet.

Sebastian

Seems like the issue is that <div style="display: contents;"> is too verbose for you? Also inline styles are considered bad (e.g. AMP forbids them).

Similar to , and , you propose , but where would lead this to? Potentially dozens of tags for various CSS attributes would be nuts.

How about a standardized set of CSS classes instead? For example <div class="-contents"> (note the hyphen as prefix) The grammar for CSS class names is explained here: https://stackoverflow.com/a/449000

Related: Proposal: Live fragments

(This is arguably far more immediately useful in the DOM side than even the HTML side.)

The class syntax is a bit more lax than that: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#set-of-space-separated-tokens

Specifically, anything that doesn’t contain whitespace is valid. The DOM spec agrees with this, by throwing in the presence of whitespace: https://dom.spec.whatwg.org/#dom-domtokenlist-add

It’d be nice, though. (Maybe if a new element was used instead, that’d be better IMHO. I’m not against an unstylable <ignore> - it’d accomplish the same objective my proposal would, just a little more broadly.)