Dana Ciocandanaciocan.com·Nov 19, 2024Introduction to Web ComponentsEver since I first learned about web components I have been kind of fascinated by them and I’m not entirely sure why. Sure, there is something “neat” and elegant about the idea of creating components - building blocks of the web if you will - outside...64 readsdeclarative-shadow-dom
Adeesh Sharmaadeesh.hashnode.dev·Oct 13, 2024Part 1/2: Introduction to Web Components and Cross-Framework IntegrationDisclaimer! This 2-part series is not meant for a quick read—it requires you to take the time to analyze the code blocks and connect the functionality as you read through. Since Web Components is a distributed concept, it assumes some prior understan...50 readsWeb Components
Anandkumaranandpak.hashnode.dev·Sep 12, 2024How to Manage Locators and Selectors in Playwright🎭 Master the art of web automation with Playwright, one locator at a time! Locators and selectors are crucial when automating web interactions using Playwright. They help identify and interact with elements on a webpage. In this blog, I'll guide you...36 readsGetbytestid
Patrick Waltherr3ddox.hashnode.dev·May 26, 20245 things I learned building Web ComponentsOver the past few years, I’ve had the opportunity to develop two distinct web component libraries for different clients. Throughout this journey, I discovered that adhering to a set of fundamental principles when creating new components helped me cir...1 like·99 readsWeb Development
Debasmita Adhikaridebasmita-a.hashnode.dev·Dec 15, 2023Handling Shadow DOM in SeleniumWhat is a Shadow DOM ? Simply speaking, shadow DOM is an extra layer of security in the DOM. As per the the numerous articles in the internet "Shadow DOM serves for encapsulation. It allows a component to have its very own “shadow” DOM tree, that can...Selenium BasicsJavascriptExecutor
Madhu Sainimadhusaini22.hashnode.dev·Aug 27, 2023DOM, Virtual DOM and Shadow DOM: A Comprehensive Guide👋 Introduction Before we dive into the difference between DOM, Virtual DOM, and Shadow DOM, let's first understand the meaning of DOM. 🌐 The DOM stands for "Document Object Model". In simple terms, it's a tree-like representation of the HTML elemen...26 likes·151 readsJavaScript
Aditya Sharmaadityash1.hashnode.dev·Aug 7, 2023Exploring Shadow DOM: Understanding Its Significance in Modern Web DevelopmentIntroduction Shadow DOM is a web standard that allows for the encapsulation of JavaScript, CSS, and HTML within a specific element, creating a separate DOM tree known as the Shadow Tree. This encapsulation helps in creating reusable and modular compo...DOM
Cesar Romanblog.cesartheroman.com·Aug 2, 2023Day 4 Overview: Reactive Programming with ProxiesCreating a Proxy A proxy is a wrapper object that allows you to intercept and modify operations performed on the wrapped object, allowing us to add custom behavior or validations to the object’s properties and methods. So this immediately strikes me ...30 readsWorking through FEM's: VanillaJS Courseproxy
Manisha Basrajscodelover.hashnode.dev·Jul 24, 2023Understanding Shadow DOMUnleashing the Magic: Creating Custom Buttons with Shadow DOM What is Shadow DOM? Shadow DOM provides a way to attach a hidden separated DOM to an element. Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this s...2 likesShadowDOM
Vaibhav Tyagivaibhavtyagi.hashnode.dev·Jan 18, 2023What is Virtual DOM in React?The virtual DOM is a fundamental React concept. If you've written React code in the past few years, then you've probably heard of it. However, you may not understand how it works and why React uses it. In this blog post, we will dive deep into the to...93 readsReact