hongymagic · August 18, 2013 03:34
diff --git a/jsbin.UWEpoT.css b/jsbin.UWEpoT.css
 html { 
  font-size: 100%;
 }

 img,
 button, 
 input {
  -webkit-appearance: none;
  display: block;
  
  margin: 0; padding: 0.4rem 0.2rem;
  border: 1px solid #222;
  background: #fff;
 }

 button:after,
 input:after {
  content: '*'
 }
diff --git a/jsbin.UWEpoT.html b/jsbin.UWEpoT.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="description" content="Cannot force content into content-less elements! Not even via shadow DOM!" />
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body>
  <input type="submit" />
  <button type="submit">Hello</button>
  <img src="http://www.gravatar.com/avatar/46068a67c1129be0dd0e4915f62b6677?s=29" />
 </body>
 </html>
diff --git a/jsbin.UWEpoT.js b/jsbin.UWEpoT.js
 var input = document.querySelector('input');
 var root = input.webkitCreateShadowRoot();
 root.textContent = 'Hello*';
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Cannot force content into content-less elements! Not even via shadow DOM!" />
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<input type="submit" />
	<button type="submit">Hello</button>
	<img src="http://www.gravatar.com/avatar/46068a67c1129be0dd0e4915f62b6677?s=29" />
	</body>
	</html>
	var input = document.querySelector('input');
	var root = input.webkitCreateShadowRoot();
	root.textContent = 'Hello*';