MehdiDado

I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.

Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)

Shadow DOM

Heads Up! It's all about the V1 Spec.

In a nutshell, Shadow DOM enables local scoping for HTML & CSS.

	<!-- Bootstrap -->
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

	<!-- Font Awesome -->
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- Bootlint-->
	<script src="//maxcdn.bootstrapcdn.com/bootlint/0.11.0/bootlint.min.js"></script>

	/*
	Assuming jQuery Ajax instead of vanilla XHR
	*/

	//Get Github Authorization Token with proper scope, print to console
	$.ajax({
	url: 'https://api.github.com/authorizations',
	type: 'POST',
	beforeSend: function(xhr) {
	xhr.setRequestHeader("Authorization", "Basic " + btoa("USERNAME:PASSWORD"));

	<?php

	//This is all you need to configure.
	$app_key = '';
	$app_token = '';

	//These are our constants.
	$api_base = 'https://api.twitter.com/';
	$bearer_token_creds = base64_encode($app_key.':'.$app_token);

	<?php
	$fileName = $_FILES['afile']['name'];
	$fileType = $_FILES['afile']['type'];
	$fileContent = file_get_contents($_FILES['afile']['tmp_name']);
	$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);

	$json = json_encode(array(
	'name' => $fileName,
	'type' => $fileType,
	'dataUrl' => $dataUrl,