Bug 14011 - Allow custom elements
Summary: Allow custom elements
Alias: None
Product: HTML WG
Classification: Unclassified
Component: LC1 HTML5 spec (show other bugs)
Version: unspecified
Hardware: All All
: P2 normal
Target Milestone: ---
Assignee: Ian 'Hixie' Hickson
QA Contact: HTML WG Bugzilla archive list
URL: http://tanalin.com/_experimentz/bugs/...
Depends on:
Reported: 2011-09-02 23:19 UTC by Marat Tanalin | tanalin.com
Modified: 2011-09-03 19:41 UTC (History)
6 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Marat Tanalin | tanalin.com 2011-09-02 23:19:23 UTC
It would be nice to be able to use custom elements (elements with any custom tag names) where otherwise SPAN elements with class would be used.

For example, instead of:

	<span class="lorem">LOREM</span>
	<span class="ipsum">IPSUM</span>

we could do this:


This would simplify HTML-code while making it more elegant.

Browsers already support custom elements -- to the same extent as any other HTML5 container-elements such as SECTION or ARTICLE.

To prevent future conflicts with new (currently even noninvented) structural markup (which rendering or behavior may be different from just block-level or inline element), we could use special CSS-like declarations that define explicitly what elements should look/behave natively and what elements should look/behave just as common containers (exactly like SPAN element).

Such declarations could contain selectors (tag names in simplest case), where each selector is placed on its own line (one selector per line).

These declarations are intended _solely_ for future (currently nonexistent) browsers that would support both using custom elements _and_ some new (currently noninvented) structural markup.

For example:

<style type="text/elements">
/* elements.txt contains two selectors: DOLOR and AMET*/
@import "elements.txt";

@custom {

@native {
	.example > LOREM

In the example, DOLOR and AMET (from external file) as well as LOREM and IPSUM elements will look/behave by default exactly as SPAN element. But LOREM elements that are direct children of an element with "example" class should look/behave native way (according to actual HTML-spec and default browser capabilities) -- as if LOREM was not declared as custom element.

More detailed syntax decription:

@import directive imports external file (like as in CSS) that contain list of custom and native elements. This external file can contain @custom and @native sections as well;

@custom section contains selectors specifying elements that should behave as just _common container_ (exactly like SPAN element) even if in a future HTML-version these elements will have some special styling (e.g., nonzero margins or borders) and/or functionality (e.g., some special response to clicking).

@native section contains selectors specifying elements that should behave way they should according to current HTML-spec and current browser capabilities. When needed, this allows to override some selectors from @custom section and thus "reset" global "customness" of elements to make them behave natively in a more local contexts. In the particular example, LOREM elements that are direct children of element with "example" class should look/behave according to actual HTML-spec and default browser capabilities.

Since these declarations are inside STYLE element with new type-attribute value (type="text/elements"), such STYLE element is just ignored by current browsers that do not support this mechanism.

Just in case, a common container has two kinds:

1. its default styling is exactly the same as for SPAN element;
2. it has no any special functionality/behavior -- exactly as SPAN element.

See also bug URL for demo page.

Comment 1 Tab Atkins Jr. 2011-09-02 23:30:15 UTC
See the existing work/discussions on the Web Component Model.
Comment 2 Ian 'Hixie' Hickson 2011-09-03 19:41:34 UTC
EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are satisfied with this response, please change the state of this bug to CLOSED. If you have additional information and would like the editor to reconsider, please reopen this bug. If you would like to escalate the issue to the full HTML Working Group, please add the TrackerRequest keyword to this bug, and suggest title and text for the tracker issue; or you may create a tracker issue yourself, if you are able to do so. For more details, see this document:

Status: Rejected
Change Description: no spec change

This defeats the entire point of having a well-defined semantic language: there's no fallback behaviour for legacy UAs or UAs that don't support the component model / CSS / scripting / whatever it is that gives the elements their behaviour or styles. For example, search engines wouldn't be able to determine how to process the files that used these new features.