It looks like you're trying to create a Custom Element but you haven't registered it yet. To create your own XFoo element would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Custom Element</title>
</head>
<body>
<!-- Create a template for the content inside your element -->
<template>
<h1>Hello from XFoo</h1>
</template>
<!-- Register your new element -->
<script>
var tmpl = document.querySelector('template');
var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.createdCallback = function() {
var root = this.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true));
};
var XFoo = document.registerElement('x-foo', {
prototype: XFooProto
});
</script>
<!-- Use the element you've just registered as a tag -->
<x-foo></x-foo>
<!-- OR, create an instance using JavaScript -->
<script>
var el = document.createElement('x-foo');
document.body.appendChild(el);
</script>
</body>
</html>
Unfortunately this approach depends on native APIs which currently only ship in Chrome 34. As someone else mentioned, a much easier approach to creating your own custom element would be to use Polymer. Polymer is a library that adds support for Web Components (essentially what you're trying to build) to all modern browsers. That includes IE 10+, Safari 6+, Mobile Safari, current Chrome and current Firefox.
I've put together a jsbin which shows how to create your own x-foo
element using Polymer.