How to Apply CSS to HTML5 Custom Elements

Proper way to apply CSS to HTML5 custom elements

You can apply CSS to custom elements just like you can to standard HTML elements.

There's nothing wrong with scroll-content { ... }, as written in your code.

A Little Background

The browser, at a basic level, has no clue what elements exist. It doesn't recognize anything... until it is exposed to the default style sheet (sample).

The default style sheet introduces the browser to HTML elements.

Custom elements can therefore be defined as elements that are not included in the default style sheet. (Elements that exist, but are unsupported by the browser, could share this definition.)

Custom elements could, however, be introduced to the browser in author styles.

Here's something important to consider:

If the browser doesn't recognize an element (i.e., it's not in the default style sheet), it will apply CSS initial values.

6.1.1 Specified
values

User agents must first assign a specified value to each property based
on the following mechanisms (in order of precedence):

If the cascade results in a value, use it.

Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent
element.

Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

As outlined above, if an element is unrecognized (#1 & #2 don't apply), use the initial value from the property definition (#3 applies).

So in your case:

Your custom element is: <scroll-content>
Your CSS is: scroll-content { overflow: hidden; }
You say in your question that this code does what it's supposed to do. But unless the framework you mention provides additional styles for custom elements, it cannot work (demo).

Here's why:

Since <scroll-element> is not in the default style sheet it will use CSS initial values.
Well, the initial value of the display property is inline.
But the overflow property only works on block elements.

So there's no way this HTML/CSS combination could work – the overflow property would be ignored, as would height, width and any other properties that don't apply to inline elements.

A custom element would need to have display: block applied for overflow to work (demo).

Similarly, the only reason body, div, h1, p, ul exist as block elements is because they are defined this way in the default style sheet (sample).

So, putting aside the arguments for and against custom elements, here's the bottom line:

Add display: block to your custom elements and you're good-to-go.

Style custom elements in HTML5

HTML Custom Elements by default are defined as an undefined element, similar to a span. As an undefined element which the browser has never seen before, they have no default user agent styling and will be given inherited values and will be seen as an inline element which is the default for all elements apart from when a user agent stylesheet overrides it due to conforming with the W3C Recommendated defaults.

Your only option is to really have all of the elements at the top of your CSS style defined as a block level element.

customelement, customelement2 {

  display: block;  

}

div {

  background-color:green;

}

customelement {

  background-color:blue;

}

customelement2 {

  background-color: red;

}

<div>

  <h1>Not Custom  

</div>

<div>

  <customelement>

    <h1>Custom Element</h1>

  </customelement>

</div>

<div>

  <customelement2>

    <h1>Custom Element 2</h1>

  </customelement2>

</div>

Are custom elements valid HTML5?

The Custom Elements specification is available in Chrome and Opera, and becoming available in other browsers. It provides a means to register custom elements in a formal manner.

Custom elements are new types of DOM elements that can be defined by
authors. Unlike decorators, which are stateless and ephemeral, custom
elements can encapsulate state and provide script interfaces.

Custom elements is a part of a larger W3 specification called Web Components, along with Templates, HTML Imports, and Shadow DOM.

Web Components enable Web application authors to define widgets with a
level of visual richness and interactivity not possible with CSS
alone, and ease of composition and reuse not possible with script
libraries today.

However, from this excellent walk through article on Google Developers about Custom Elements v1:

The name of a custom element must contain a dash (-). So <x-tags>, <my-element>, and <my-awesome-app> are all valid names, while <tabs> and <foo_bar> are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.

Some Resources

Example Web Components are available at https://WebComponents.org
WebComponents.js serves as a polyfill for Web Components until they are supported everywhere. See also the WebComponents.js github page & web browser support table.

Style doesn't apply to HTML5 custom element

Make sure to register your custom element and separate it with a dash (-):

document.registerElement('x-comment');

Your element must contain a dash, otherwise the browser won't be able to recognize it as a custom element.

From the specs:

The custom element type identifies a custom element interface and is a
sequence of characters that must match the NCName production, must
contain a U+002D HYPHEN-MINUS character, and must not contain any
uppercase ASCII letters. [...]

Using custom HTML Tags

It is best to avoid using custom tags, as you never know when those tags may become standardized, and have special usage in the future.

The best thing to do for your example, if you want to avoid using the header tags, is the following:

<div class="toys grid_4 push_2"> </div>

.toys {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
}

In addition:

If you do not use standard html tags when designing pages, they will not appear in any organized manner when styles are disabled. This is not a problem, going forward, but if for any reason you needed to view a list of "toys" without styles, you had be out of luck unless you use <ul> or <ol> with <li> tags.

UPDATE:

As Flimzy pointed out in the comments, custom HTML elements now have their own W3C specification. However, they are not yet fully supported.

Specification: https://www.w3.org/TR/custom-elements/
Support: http://caniuse.com/#feat=custom-elements