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. :)
Heads Up! It's all about the V1 Spec.
In a nutshell, Shadow DOM enables local scoping for HTML & CSS.
| var a = fetch("http://path/to/audio.wav") | |
| .then(res => { | |
| var reader = res.body.getReader(); | |
| return reader.read().then(result => { | |
| return result; | |
| }); | |
| }) | |
| .then(data => { | |
| console.log(data); |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&display=swap'); | |
| body { | |
| --inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| --ibm-plex-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| font-family: var(--inter); | |
| } | |
| /* The title */ | |
| [class^='EditableTitle__Title'] { |
| [ | |
| { | |
| "name": "Assistix", | |
| "manager": "Fuelton", | |
| "cagr": 3.720808713691426, | |
| "createdDate": 1586810446274, | |
| "avatar": "https://picsum.photos/id/133/200", | |
| "volatility": "high", | |
| "minInvestmentAmount": 49162.31361884028, | |
| "description": "Lorem tempor consectetur minim laboris incididunt adipisicing voluptate Lorem ut eiusmod.", |
| @Effect({dispatch: false}) | |
| entityCreationSuccess$: Observable<Action> = this.actions$.pipe( | |
| ofType(UserActions.CREATE_USER_SUCCESS, PostActions.CREATE_POST_SUCCESS), | |
| tap(action => { | |
| this.router.navigate(['../'], {relativeTo: this.route}) | |
| }) | |
| ); |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Rich Text Editor - FROM MDN!</title> | |
| <script type="text/javascript"> | |
| var oDoc, sDefTxt; | |
| function initDoc() { | |
| oDoc = document.getElementById("textBox"); | |
| sDefTxt = oDoc.innerHTML; |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>Filtering vs Splicing</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script> | |
| <script src="./suite.js"></script> | |
| </head> | |
| <body> | |
| <h1>Open the console to view the results</h1> |
| function flatten(array) { | |
| return array.reduce( (acc, e) => { | |
| if(Array.isArray(e)) { | |
| // if the element is an array, fall flatten on it again and then take the returned value and concat it. | |
| return acc.concat(flatten(e)); | |
| } else { | |
| // otherwise just concat the value. | |
| return acc.concat(e); | |
| } | |
| }, [] ) // initial value for the accumulator is [] |
| @Effect() | |
| search$: Observable<Action> = this.actions$.pipe( | |
| ofType(SearchActions.SEARCH), | |
| switchMap(action => { | |
| const query = action.payload; | |
| return [new FetchPanel1Data(query), new FetchPanel2Data(query)]; | |
| }) | |
| ); |
| { | |
| "name": "Issues", | |
| "children": [ | |
| { | |
| "name": "Word 1", | |
| "children": [ | |
| { | |
| "value": 8052, | |
| "name": "Word 1" | |
| }, |