What is Shadow DOM

What is Shadow DOM?

Shadow DOM is a core part of the Web Components standard, allowing developers to encapsulate HTML, CSS, and JavaScript within a custom element. This encapsulation ensures that styles and behavior inside the component are isolated from the rest of the document, preventing conflicts between internal and external CSS or scripts.

How It Works

  1. Shadow Root: A shadow DOM is created inside a host element by attaching a shadow root, which acts as a separate document tree.
  2. Encapsulation: Elements within the shadow DOM don’t interfere with or inherit styles from the main DOM (unless explicitly designed to do so).
  3. Slots: The shadow DOM allows for content projection through <slot> elements, letting external content be placed inside the component.

Example of Shadow DOM in Action

<custom-element></custom-element>

<script>
  class CustomElement extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });

      shadow.innerHTML = `
        <style>
          p { color: red; }
        </style>
        <p>This is inside the shadow DOM</p>
      `;
    }
  }

  customElements.define('custom-element', CustomElement);
</script>

In this example, the <p> element inside the shadow DOM will remain unaffected by CSS from the main document. Even if the main page defines a different style for <p> elements, it won’t apply inside the shadow tree.

Modes of Shadow DOM

  • Open Mode: The shadow root is accessible through JavaScript with element.shadowRoot.
  • Closed Mode: The shadow root is hidden from external scripts.

Use Cases for Shadow DOM

  1. Web Components: Encapsulate reusable UI elements like modals, buttons, or dropdowns.
  2. Style Isolation: Prevent style leakage between a component and the main page.
  3. Browser UI Elements: Native elements like <video> and <input> use shadow DOM internally to structure their content and styles.

Limitations of Shadow DOM

  • Selectors like querySelector can’t access it directly: You need to explicitly traverse the shadow root or use utilities like Puppeteer’s pierce selector.
  • SEO Challenges: Content inside shadow DOM might not always be indexed properly by search engines.

Shadow DOM helps in building modular and maintainable code, making it an essential tool for modern web development【19†source】【20†source】.

댓글

댓글 쓰기

이 블로그의 인기 게시물

Using the MinIO API via curl

Using the MinIO API via curl is straightforward, as MinIO is compatible with Amazon S3 API, so most commands follow a similar syntax. Here’s a guide on how to use curl with the MinIO API for some common operations like uploading, downloading, and managing objects. Prerequisites Access Key and Secret Key : Obtain your MinIO Access Key and Secret Key. MinIO Endpoint : Know your MinIO server endpoint, e.g., http://localhost:9000 . Bucket : You may need an existing bucket name, or create a new one using the commands below. Authentication Header For requests to work with MinIO, you need to include authentication in the headers. MinIO uses AWS Signature Version 4 for signing requests. Common Examples 1. List Buckets To list all buckets in your MinIO account, use: curl -X GET \ - -url "http://localhost:9000/" \ - H "Authorization: AWS <AccessKey>:<Signature>" 2. Create a Bucket To create a new bucket, use: curl -X PUT \ - -url "htt...
자세한 내용 보기

How to split a list into chunks of 100 items in JavaScript, 자바스크립트 리스트 쪼개기

To split a list into chunks of 100 items in JavaScript, you can create a function that loops through the list and slices it into smaller subarrays of size 100. Here’s how you can do it: Example Code: function splitListBy100( array ) { const chunkSize = 100 ; const result = []; for ( let i = 0 ; i < array .length; i += chunkSize) { result .push( array .slice(i, i + chunkSize)); } return result ; } // Example usage: const myArray = [... Array ( 350 ).keys()]; // Creating an array of numbers from 0 to 349 const chunks = splitListBy100(myArray); console.log(chunks); Explanation: chunkSize : Defines the size of each chunk, which in this case is 100. for loop : Iterates over the array, incrementing the index by 100 each time. array.slice(i, i + chunkSize) : Extracts a chunk from the array starting from index i and ending at i + chunkSize . result.push() : Adds the chunk to the result array. The function returns an array of arrays (...
자세한 내용 보기

HTML Inline divisions at one row by Tailwind

To arrange a **variable number of inline ` ` elements in a row** using **Tailwind CSS**, you can utilize several approaches, depending on your layout needs. Below are some common methods to align multiple divs in a row: ### 1. **Using Flexbox (`flex`)** Tailwind's `flex` utilities provide a straightforward way to align a variable number of ` ` elements inline in a row. Flexbox will ensure that they stay in a row, wrapping if necessary. #### **Example Using Flexbox** ```html Div 1 Div 2 Div 3 Div 4 ``` #### **Explanation:** - `flex`: Puts the child elements (the divs) in a row. - `flex-wrap`: Ensures that if there are too many divs to fit in one row, they will wrap to the next line. - `space-x-4`: Adds horizontal spacing between the divs (adjust as needed). ### 2. **Using Grid (`grid`)** Another way to align divs in a row is by using Tailwind's `grid` utilities. Grid layouts are very flexible and allow control over the number of columns. #### **Example Using ...
자세한 내용 보기

Boilerplate for typescript server programing

Here are some recommended boilerplates and frameworks for TypeScript server programming, depending on your requirements: 1. NestJS (Highly Recommended for Enterprise-Grade Applications) NestJS is a progressive Node.js framework built with TypeScript. It provides an opinionated structure and is excellent for building scalable and maintainable server-side applications. Features : Dependency injection Modular architecture Built-in support for WebSockets, GraphQL, REST APIs Easy integration with tools like Swagger, TypeORM, and Mongoose Getting Started : Install Nest CLI: npm i -g @nestjs/cli nest new project-name Boilerplate is automatically generated with ready-to-use configurations for controllers, services, and modules. Website : https://nestjs.com/ 2. Express with TypeScript Express.js is lightweight and minimal, making it ideal for developers who prefer flexibility over opinionated frameworks. Boilerplate : You can start with an official or community-maintai...
자세한 내용 보기

가속도 & 속도

F = ma 에서 가속도(( a ))는 속도(( v ))의 시간(( t ))에 대한 미분이므로, 수식으로 표현하면 다음과 같습니다. \[a = \frac{dv}{dt}\] 또한, 속도(( v ))는 위치(( x ))의 시간 미분이므로, 이를 포함하여 가속도를 표현하면 \[a = \frac{d}{dt} \left( \frac{dx}{dt} \right) = \frac{d^2 x}{dt^2}\] 즉, 가속도는 위치의 이阶 미분(두 번째 미분)입니다.
자세한 내용 보기

Gradle multi-module project

In a Gradle multi-module project , it's common to define shared dependencies in the parent project (root project) to avoid duplication across modules. This structure allows child modules to inherit or access those dependencies. Below are some best practices on how to correctly share dependencies between parent and child modules in a multi-module Gradle project . Project Structure Example multi-module-project/ ├── build .gradle .kts (Parent/root project) ├── settings .gradle .kts ├── module-a/ │ └── build .gradle .kts ├── module-b/ │ └── build .gradle .kts Step 1: Configure settings.gradle.kts In a multi-module project, the settings.gradle.kts file should declare all the modules that are part of the build. // settings.gradle.kts rootProject .name = "multi-module-project" // Include child modules include ( "module-a" , "module-b" ) Step 2: Define Shared Dependencies in the Parent build.gradle.kts The root build.gradle.kts ca...
자세한 내용 보기

How to checkout branch of remote git, 깃 리모트 브랜치 체크아웃

To check out a branch from a remote Git repository, you can follow these steps: 1. Fetch the remote branches First, ensure that your local repository is aware of the remote branches by using git fetch . This updates your local references to the remote branches. git fetch origin 2. Check out the remote branch Once the remote branches are fetched, you can check out the desired branch using git checkout -b and specifying the remote branch. Command: git checkout -b < local -branch- name > origin/<remote-branch- name > Explanation: <local-branch-name> : The name you want to give to your local branch. origin/<remote-branch-name> : Refers to the branch on the remote called origin (which is the default name for the main remote repository) and the branch you want to check out. Example: If the remote branch is called feature-branch and you want to create a local branch with the same name, you would run: git checkout -b feature -branch origin / feature -...
자세한 내용 보기

CDPEvents in puppeteer

In Puppeteer , CDPEvents refers to events emitted by the Chrome DevTools Protocol (CDP) . Puppeteer leverages CDP to interact with and control a Chromium-based browser. CDP provides detailed, low-level access to browser internals, such as network traffic, console logs, page lifecycle events, and more. You can listen to these CDP events through Puppeteer’s API to monitor or intercept browser activity. How to Listen for CDP Events in Puppeteer Enable the Required CDP Domain: Some events require enabling a particular domain (e.g., 'Network' , 'Page' , 'Runtime' ). Use page._client() to Access the CDP Session: Although it’s a bit lower-level, Puppeteer allows access to DevTools through the page._client() API. Example: Listening for Network Requests This example demonstrates how to intercept and log network requests using CDP. const puppeteer = require( 'puppeteer' ); ( async () => { const browser = await puppeteer.launch({ headless...
자세한 내용 보기

Sparse encoder

A Sparse Encoder refers to a variant of neural network architectures where sparsity is introduced in the encoding process. This can mean either: Sparse Input Representations : The input features to the encoder are sparse (many values are zero). Sparse Output Representations : The encoder is designed to produce sparse outputs where most of the encoded feature values are zero. Sparse encoders are often used to improve model interpretability, efficiency, and generalization. They can be applied in various contexts, including traditional neural networks, autoencoders, and even transformer-based models. Key Characteristics of Sparse Encoders Sparsity in Representations : The model learns a feature representation where only a subset of neurons is active for a given input. This mimics how biological neurons operate, promoting interpretability and reducing noise in representations. Reduced Computational Cost : Sparse operations often result in lower computational overhead since...
자세한 내용 보기

Reactjs datetime range picker

To create a datetime range picker in React, you can use a library such as react-datetime-range-picker . This library provides a customizable date and time range picker component that you can easily integrate into your React application. Here's an example of how you can use it: Install the library using npm or yarn: npm install react-datetime- range -picker Import the necessary components into your React component: import React, { useState } from 'react' ; import DateTimeRangePicker from 'react-datetime-range-picker' ; Create a state to hold the selected date and time range: const [selectedRange, setSelectedRange] = useState({ startDate: null , endDate: null }); Render the DateTimeRangePicker component and handle the selection changes: ```jsx const handleRangeChange = (range) => { setSelectedRange(range); }; return ( ); ``` In the example above, the DateTimeRangePicker component is rendered with the onChange event handler and th...
자세한 내용 보기