Hans Piña hansfpc

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.

	import { Link } from 'react-router-dom'
	import { Badge, Col, Menu } from 'antd'

	const StyledBadge = styled(Badge)`
	.ant-badge-count {
	background-color: #7ECBBF;
	color: white;
	box-shadow: 0 0 0 1px #d9d9d9 inset;
	}
	`

	//Reescribe la URL para que sea Amigable
	<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule ^([^\.]+)$ $1.html [NC,L]

	//Cachear assets
	ExpiresActive On
	ExpiresByType assets/images/jpg M2592000


	//DEFINICION DE PROMESA
	var p1 = new Promise((resolve, reject) => {
	if (true)
	throw new Error("rejected!"); // same as rejection
	else
	resolve(4);
	});

	// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
	// Link is your replacement for anchor tags.
	// Route is the conditionally shown component based on matching a path to a URL.
	// Switch returns only the first matching route rather than all matching routes.
	import {
	BrowserRouter as Router,
	Link,
	Route,
	Switch,
	} from 'react-router-dom';

	function PrivateRoute ({component: Component, authenticated, ...rest}) {
	return (
	<Route
	{...rest}
	render={(props) => authenticated === true
	? <Component {...props} />
	: <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
	/>
	)
	}

	# Notes

	containerID # First 3 digits of the ID are usually sufficient

	-it # Interactive mode

	# Check Docker version
	docker -v
	# or
	docker version

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<script type="text/javascript">
	const warningTitleCSS = 'color:red; font-size:60px; font-weight: bold; -webkit-text-stroke: 1px black;';
	const warningDescCSS = 'font-size: 18px;';

	//Usage
	import React from 'react';
	import { BrowserRouter as Router } from 'react-router-dom';
	import Route from './AuthRoute';

	import Login from './Login';
	import Private from './Private';

	export default () =>
	<Router>