Custom Elements

Kevin Hamr · Jun 23, 2010

I'm looking for simple ways to provide additional functionality to web
pages without sacrificing the legibility of the HTML, so that people
can reuse my JavaScript functionality with only really understanding
HTML.

I know in HTML5 they introduced custom data-* attributes, but it'd be
much easier to use <foobar.../> instead of <span data-foobar=.../>.
Any suggestions? Do you think using custom elements even though its
not valid HTML5 is still legitimate?

Lastly, my sample is just a highlight, but the actual applications I'm
looking at are things for embedding RSS feeds, remote content, etc;
things that will interact with some server side functionality that I
want to can and keep out of sight from the HTML web developer.
Thoughts?

Sample:

<!DOCTYPE html>
<html>
<head>
<title>Enhanced Tags with HTML5</title>
</head>
<body onload="init()">
This is using a <highlight>custom element</highlight>.

<script type="text/javascript">
window.init = function() {
elems = document.body.getElementsByTagName("highlight");
for (var i = 0; i<elems.length; i++) {
console.log(elems);
elems.style.backgroundColor = "yellow";
}
}
</script>
</body>
</html>

Pascal · Jun 23, 2010

Kevin Hamr a écrit :

<!DOCTYPE html>
<html>
<head>
<title>Enhanced Tags with HTML5</title>
</head>
<body onload="init()">
This is using a <highlight>custom element</highlight>.

<script type="text/javascript">
window.init = function() {
elems = document.body.getElementsByTagName("highlight");
for (var i = 0; i<elems.length; i++) {
console.log(elems);
elems.style.backgroundColor = "yellow";
}
}
</script>
</body>
</html>

Hi,

I can't remember where exactly, but I'm sure to have seen somme
scriptaculous-like library using this kind of solution (in a slideshow
application, if I guess right).
However, I don't think that the web is ready for generalizing an
XML-like syntax, even in HTML 5.
An exception could be found with XHTML, allowing the use of custom tags
if a specific namespace is declared for them.

Maybe it's a better way to use CSS classes or ids instead, with some
right JS stuff to handle them.
Very classical, but the most robust today.

Cordially,
Pascal

Frobernik · Jun 23, 2010

Pascal said:
Kevin Hamr a écrit :

<!DOCTYPE html>
<html>
<head>
<title>Enhanced Tags with HTML5</title>
</head>
<body onload="init()">
This is using a <highlight>custom element</highlight>.

<script type="text/javascript">
window.init = function() {
elems = document.body.getElementsByTagName("highlight");
for (var i = 0; i<elems.length; i++) {
console.log(elems);
elems.style.backgroundColor = "yellow";
}
}
</script>
</body>
</html>

Click to expand...

Hi,

I can't remember where exactly, but I'm sure to have seen somme
scriptaculous-like library using this kind of solution (in a slideshow
application, if I guess right).
However, I don't think that the web is ready for generalizing an
XML-like syntax, even in HTML 5.
An exception could be found with XHTML, allowing the use of custom tags
if a specific namespace is declared for them.

Maybe it's a better way to use CSS classes or ids instead, with some
right JS stuff to handle them.
Very classical, but the most robust today.

Cordially,
Pascal

Haven't you guys heard of XSLT or the (rather messy) subset XFBML?

If its custom data in existing attributes why not use name or the class
attributes similar to :-

<div class="data-helloworld-whatever clearLeft">The dumb cat jumps over
the crafty fox</div>

Kevin Hamr · Jun 24, 2010

This example is really fair: I more plan to do stuff like

<wikipedia>Football</wikipedia> or <twitter count="3"
username="khamer"></twitter>, where its not just styling but
additional functionally like linking, fetching data from a CGI and
inserting it into the element via AJAX, etc.

I'll look into custom namespaces with XHTML, as that might do the
trick. I may just do some testing to try to determine what negative
side effects I'll actually run into by breaking validation like this,
as it's possible the major browsers just all ignore tags they don't
recognize and leave them alone.

--Kevin

RobG · Jun 24, 2010

I'm looking for simple ways to provide additional functionality to web
pages without sacrificing the legibility of the HTML, so that people
can reuse my JavaScript functionality with only really understanding
HTML.

I know in HTML5 they introduced custom data-* attributes, but it'd be
much easier to use <foobar.../> instead of <span data-foobar=.../>.

HTML is a *document* markup language, if you want to transfer data,
use XML or the features of HTML that allow you to include data (i.e.
use the right tool for the job).

Any suggestions?

Most of the above is off-topic for this group, try:

comp.infosystems.www.authoring.html
<URL: http://groups.google.com/group/comp.infosystems.www.authoring.html/topics?hl=en&ie=UTF-8&oe=utf-8

Do you think using custom elements even though its
not valid HTML5 is still legitimate?
No.

Lastly, my sample is just a highlight, but the actual applications I'm
looking at are things for embedding RSS feeds, remote content, etc;
things that will interact with some server side functionality that I
want to can and keep out of sight from the HTML web developer.

Use HTML 4.01. Put data that is to be used by script as script in
script elements. Why embed information in markup that is intended to
be used by script?

Thoughts?

You want to keep thoughts out of sight of HTML web developers?

Kevin Hamr · Jun 24, 2010

I seem to keep getting requests from amateur webmasters who are
authoring in HTML/CSS, but haven't gotten past it. With JavaScript,
it's easy to add additional functionality to the HTML Document at
runtime, so my thought was to provide a simple way for those amateurs
to be able use bits of functionality that I can package for them (such
as, say, the AJAX to retrieve the last five tweets from a given user
and insert them into an element in the page.)

CSS doesn't seem to care, so lots of things work out cleanly.
Continuing the Twitter example, if the custom element I defined was
<twitter></twitter> which turns into something like <twitter><p>Tweet
One</p><p>Tweet Two</p><p>Tweet Three</p></twitter>, then the CSS
document can even have rules like

twitter { font-family:Arial; }
twitter p { border: 1px solid #f00; }
etc.

Still going to look into XHTML with custom namespaces to see if
that'll do what I'm thinking. I'm not sure why HTML 4.01 would be
better than HTML 5.

--Kevin

RobG · Jun 24, 2010

I seem to keep getting requests from amateur webmasters who are
authoring in HTML/CSS, but haven't gotten past it. With JavaScript,
it's easy to add additional functionality to the HTML Document at
runtime, so my thought was to provide a simple way for those amateurs
to be able use bits of functionality that I can package for them (such
as, say, the AJAX to retrieve the last five tweets from a given user
and insert them into an element in the page.)

So why wouldn't you use a div element and a class of tweetContainer or
similar, then your script fills it with content. The default display
can be none, so if the script doesn't run, the user doesn't have a
useless element in the page. If it does run, it fills it with content
and displays it.

CSS doesn't seem to care, so lots of things work out cleanly.

It's the brower that cares.

Continuing the Twitter example, if the custom element I defined was
<twitter></twitter> which turns into something like <twitter><p>Tweet
One</p><p>Tweet Two</p><p>Tweet Three</p></twitter>, then the CSS
document can even have rules like

twitter { font-family:Arial; }
twitter p { border: 1px solid #f00; }
etc.

Some browsers might do that, but others will not.

Still going to look into XHTML with custom namespaces to see if
that'll do what I'm thinking.

XHTML is not well supported, IE 6 (and likely later versions) doesn't
support it at all. Serving XHTML as XML (which is what you'd need to
do to use the features of XHMTL) is probably asking far more of your
web authors than getting them to understand JSON or a similar data
transfer protocol. Serving an invalid XML document must result in a
blank page or error message with no useful content.

I'm not sure why HTML 4.01 would be
better than HTML 5.

HTML 4.01 is a more than 10 year old standard that is reasonably
consistently supported by pretty much every browser in use. HTML5 is a
draft reccommendation for a standard, parts have been implemented
piecemeal by a small number of current browsers.

As I said earlier, this is the wrong place for that discussion, it is
off-topic for this group. If you want to talk about markup, go to
comp.infosystems.www.authoring.html.

Garrett Smith · Jun 24, 2010

[...]

HTML 4.01 is a more than 10 year old standard that is reasonably
consistently supported by pretty much every browser in use. HTML5 is a
draft reccommendation for a standard, parts have been implemented
piecemeal by a small number of current browsers.

IE7 has bugs with HTML 4.01 BUTTON and OPTION. Probably more, though I
don't know what else off hand. Using an HTML 5 doctype won't change
that, however.

Using HTML 4 and class names as suggested would be most widely supported
approach.

Garrett

RobG · Jun 24, 2010

[...]

HTML 4.01 is a more than 10 year old standard that is reasonably
consistently supported by pretty much every browser in use. HTML5 is a
draft reccommendation for a standard, parts have been implemented
piecemeal by a small number of current browsers.

Click to expand...

IE7 has bugs with HTML 4.01 BUTTON and OPTION. Probably more, though I
don't know what else off hand. Using an HTML 5 doctype won't change
that, however.

Yes, it's a pity (some might say an indictment) that after so long
some browser developers don't seem to have any interest in fixing
decade old bugs related to a stable standard. What chance that the
situation with HTML5 will be any better, ever?

How to have two html audio players on one page?	0	May 3, 2022
How to use PDF-lib and how to center each line of texts on the page?	1	Aug 16, 2023
When draggable=false & draggable=true dont work ?	1	Jan 14, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
getElementsByTagName select element weirdness	5	Aug 2, 2008
How to check the validation of js files or html files including js?	6	Jan 12, 2020
Browser crashes with below code.What is wrong in below code.	12	Dec 4, 2011
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019

Custom Elements

Kevin Hamr

Pascal

Frobernik

Kevin Hamr

RobG

Kevin Hamr

RobG

Garrett Smith

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads