# The Difference Between :x:element and :x:primitive

DevFeed: [The Difference Between :x:element and :x:primitive](<https://devfeed.tech/articles/the-difference-between-x-element-and-x-primitive-22031.md>)

Original publisher: [Read original article](<https://codebeforethehorse.tumblr.com/post/35419887698>)

Author: Codebeforethehorse

Published: 2012-11-10T18:16:00Z

Content type: tutorial

Language: en

Sources: [Stefan Parker](<https://devfeed.tech/sources/stefan-parker.md>)

Topics: [XSS](<https://devfeed.tech/topics/xss.md>), [Sanitization](<https://devfeed.tech/topics/sanitization.md>), [HTML](<https://devfeed.tech/topics/html.md>), [JSON](<https://devfeed.tech/topics/json.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>), [Ajax](<https://devfeed.tech/topics/ajax.md>)

Tags: [foreach](<https://devfeed.tech/tags/foreach.md>), [function](<https://devfeed.tech/tags/function.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [json](<https://devfeed.tech/tags/json.md>), [payload](<https://devfeed.tech/tags/payload.md>), [protection](<https://devfeed.tech/tags/protection.md>), [render](<https://devfeed.tech/tags/render.md>), [rest](<https://devfeed.tech/tags/rest.md>), [xhp](<https://devfeed.tech/tags/xhp.md>), [xss](<https://devfeed.tech/tags/xss.md>)

## AI overview

This article explains when to use :x:element versus :x:primitive in XHP. It recommends :x:element for most cases because its render() method produces more XHP and supports recursive rendering, while :x:primitive ultimately stringifies the result. It identifies custom HTML nodes and non-HTML output such as JSON AJAX responses as the main reasons to use :x:primitive.

## Source excerpt

I was recently asked to clarify the differences between :x:element and :x:primitive, and when to use each one. It's actually pretty simple; the basic rule of thumb is this: always use :x:element. If you're only doing simple things in XHP you can stop reading now, but for the rest of you I'll get into the rare instances where you might use :x:primitive. First, the main difference. :x:element implements the render() method, which returns more XHP while :x:primitive implements to stringify() method, which returns a string. When you echo XHP to the page, it recursively calls render() on itself until it returns an :x:primitive. It will continue to do this to any children of an :x:primitive as well. Once the entire tree is just :x:primitives (usually meaning just HTML nodes) it stringify()s it. So why the difference? The big reason was that we can put XSS protection in all HTML elements and so long as you just return HTML nodes you'll never have to worry about input sanitization again. There are two cases where you would want to create an :x:primitive though. The first being if you wanted to create a custom HTML node. Let's say you wanted to create a <foo> tag for your own purposes. All you would need to do is extend :xhp:html-element (which extends :x:primitive) and define its tag name. class :foo extends :xhp:html-element { protected $tagname = 'foo'; } Pretty simple. You could define custom attributes and children restrictions too if you so desired. The other reason you would extend :x:primitive is if you wanted to return something other than HTML. Consider an AJAX response that returns a JSON object. You might construct an object that behaves like this: class :ajax:response extends :x:primitive { attribute array payload; attribute array errors; protected function stringify() { $html = ''; foreach ($this->getChildren() as $child) { $html .= :x:base::renderChild($child); } $response = array( 'payload' => $this->getAttribute('payload'), 'errors' => $this->getAttribute('e