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.
| // UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that | |
| // does not support `nomodule` is probably not being used anywhere. The code below is left | |
| // for posterity. | |
| /** | |
| * Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will | |
| * load <script nomodule> anyway. This snippet solve this problem, but only for script | |
| * tags that load external code, e.g.: <script nomodule src="nomodule.js"></script> | |
| * | |
| * Again: this will **not** prevent inline script, e.g.: |
| 1. Setup a project | |
| 2. Add groovy SDK support: | |
| https://www.bonusbits.com/wiki/HowTo:Add_Groovy_SDK_to_IntelliJ_IDEA | |
| 3. Download http://(yourjenkinsurl)/job/(yourpipelinejob)/pipeline-syntax/gdsl | |
| - this will give you the .gdsl file - download this to the src folder of your project. | |
| 4. Finally follow this step - right click on the src folder -> Mark directory as -> Sources Root |
| deploy: | |
| - provider: script | |
| skip_cleanup: true | |
| script: node_modules/.bin/ember deploy development --activate --verbose | |
| on: | |
| branch: master | |
| - provider: script | |
| skip_cleanup: true | |
| script: node_modules/.bin/ember deploy staging --activate --verbose | |
| on: |
| 'use strict'; | |
| var gulp = require('gulp'); | |
| var through = require('through2'); | |
| // https://gulp.readme.io/docs | |
| gulp.task('default', () => { | |
| gulp.src('src/**/*') | |
| .pipe(pipeFunction()) | |
| .pipe(gulp.dest('dist')) |
| import sinonStubPromise from 'sinon-stub-promise'; | |
| import sinon from 'sinon' | |
| sinonStubPromise(sinon) | |
| let stubedFetch = sinon.stub(window, 'fetch') ) | |
| window.fetch.returns(Promise.resolve(mockApiResponse())); | |
| function mockApiResponse(body = {}) { |
| # ---------------------------------- | |
| # Colors | |
| # ---------------------------------- | |
| NOCOLOR='\033[0m' | |
| RED='\033[0;31m' | |
| GREEN='\033[0;32m' | |
| ORANGE='\033[0;33m' | |
| BLUE='\033[0;34m' | |
| PURPLE='\033[0;35m' | |
| CYAN='\033[0;36m' |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
