# selectors Selectors are patterns used to match elements in XML and HTML trees, including for CSS style binding. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Cypress Ambassador Spotlight: Sehani Chathurangi DevFeed: [Cypress Ambassador Spotlight: Sehani Chathurangi]() Original publisher: [Read original article]() Published: 2026-08-28T16:06:18Z Content type: article Language: en Sources: [Cypress Blog]() Topics: [Cypress](), [Testing](), [Test automation](), [selectors]() Tags: [ambassador](), [automation](), [best-practices](), [community](), [cypress](), [knowledge-sharing](), [qa](), [selectors](), [testing]() ### AI overview An Ambassador Spotlight article introduces Sehani Chathurangi, a Senior Software Quality Assurance Engineer, CypressConf speaker, and blogger. She discusses her Cypress advocacy, community knowledge sharing, custom commands, and the use of data-* attributes to create stable selectors in automated tests. ### Source excerpt Welcome back to the Ambassador Spotlight series! Each edition, we shine a light on one of the testers and builders shaping the Cypress community and the people in it sharing their knowledge through blogs, talks, and everyday community support. Curious about the program itself? Learn more here. This week, meet Sehani Chathurangi, a Senior Software Quality Assurance Engineer, CypressConf speaker, and prolific blogger who shares real-world testing solutions with the community. Find out what drew h ## Implementing Page Objects in Playwright DevFeed: [Implementing Page Objects in Playwright]() Original publisher: [Read original article]() Author: T.J. Maher (noreply@blogger.com) Published: 2026-08-16T22:04:38Z Content type: tutorial Language: en Sources: [T.J. Maher]() Topics: [Playwright](), [selectors](), [test](), [Development]() Tags: [bun](), [bun-create-playwright](), [code](), [gitlab](), [jest](), [page-object](), [playwright](), [selectors](), [test](), [tests]() ### AI overview A tutorial on using Playwright page objects to organize web application tests, centralize selectors, reduce repetition, and simplify maintenance. It compares Playwright Test and Library approaches and demonstrates setting up a login-page object. ### Source excerpt Picture a login screen, such as The-Internet / Login. On this LoginPage, there is: a heading: Login Page a user name textbox with the label, "Username" a password textbox with the label, "Password" a login button, with the role of a button, and the name of "Login" a flash message that appears if you enter invalid credentials such as "NotAUser" and "NotAPassword". If you successfully log in with "tomsmith" and "SuperSecretPassword!, there is a SecureArea: a heading: "Secure Area" a flash message "You logged into a secure area!" a Logout button. Sure, you could interact with each web element in your test... but what if the username text box locator changes? You would have to update multiple tests every time the element changed. ... Instead, you could place it in a Page Object, something that Playwright handles well! "A page object represents a part of your web application. An e-commerce web application might have a home page, a listings page and a checkout page. Each of them can be represented by page object models. "Page objects simplify authoring by creating a higher-level API which suits your application and simplify maintenance by capturing element selectors in one place and create reusable code to avoid repetition". Using Playwright's Built-In Test Runner? Or Something Else? You may have noticed in https://playwright.dev/docs/pom that there are two different styles of page objects. One for "Test". One for "Library". Test: If you are writing actual Playwright test suites, and Playwright's built in test runner, use the Test section as a guide when creating page objects. Library: If you are integrating Playwright into an existing test framework such as Jest or Cucumber and just want browser automation, instead of having pre-built page fixtures, etc, you can use this format. Setting Up Page Objects Let's review a page object I created for the main login page on my GitLab account for the bun-create-typescript project, tests/pages/LoginPage.ts. The first thing we do is ## Maestro CLI 2.8.0: swipe from any point inside an element DevFeed: [Maestro CLI 2.8.0: swipe from any point inside an element]() Original publisher: [Read original article]() Author: Manu Armani Published: 2026-08-06T17:00:00Z Content type: release Language: en Sources: [mobile.dev - Medium]() Topics: [Command-line interface](), [Android](), [Cloud](), [iOS](), [Emulator](), [selectors]() Tags: [android](), [cloud](), [emulator](), [html](), [ios](), [junit](), [maestro](), [release](), [reports](), [selectors]() ### AI overview Maestro CLI 2.8.0 adds swipes from chosen points within elements, variables for permissions and screenshot thresholds, improved selector retries, bounded Android emulator boot time, faster and more targeted locale handling, broader iOS device enumeration, and reliability fixes for Maestro Cloud uploads and reports. ### Source excerpt Maestro CLI 2.8.0 adds swipes that start from a chosen point inside an element, variables in permissions and screenshot thresholds, and reliability fixes across Maestro Cloud uploads and reports. ## Give your eve agent a browser DevFeed: [Give your eve agent a browser]() Original publisher: [Read original article]() Author: Chris Tate Published: 2026-08-04T04:00:00Z Content type: release Language: en Sources: [Vercel News]() Topics: [Agent Browser](), [Extension](), [Chromium](), [browser](), [selectors](), [Template](), [Forms](), [Network](), [dashboards](), [Next.js]() Tags: [agent](), [auth](), [browser](), [chromium](), [documentation](), [extension](), [forms](), [network](), [next-js](), [sandbox](), [selectors](), [storage](), [tools](), [vercel](), [web]() ### AI overview Vercel announces an eve extension that adds agent-browser capabilities to eve agents. It enables browser navigation, content inspection, clicking, form filling, screenshots, and console and network inspection inside the agent sandbox, with selector-based interaction and controls for isolation, domains, credentials, approvals, and tool access. ### Source excerpt Your eve agent can now navigate the web like a human with agent-browser. The @agent-browser/eve extension gives any eve agent a full set of browser tools: navigate pages, read content, click, fill forms, take screenshots, and inspect console and network activity. Everything runs inside the agent's sandbox. Install the extension: Then mount it under agent/extensions/: Your agent gets namespaced tools like browser__navigate, browser__snapshot, browser__click, browser__fill, and browser__screenshot. Snapshot refs such as [ref=e12] become @e12 selectors, so the agent can inspect a page, then act on exactly what it saw. The extension includes: Sandbox isolation: Chromium and agent-browser run in the eve sandbox, not your app. Pre-install them in your sandbox template so sessions start warm, or let the extension install them on first use. Domain allowlist: Restrict navigation and subresources with allowedDomains, and control output size, screenshot handling, proxy use, and session naming through extension options. Credential protection: Cookie, storage, and saved-auth-state commands are never exposed to the model. Use eve extension overrides to disable tools, require approvals, or add app-specific guarded tools. See a complete Next.js eve app with the extension mounted in the example, or read the documentation to get started. Read more ## Meet Test Companion: AI That Helps QA Teams Keep Pace with Modern Development DevFeed: [Meet Test Companion: AI That Helps QA Teams Keep Pace with Modern Development]() Original publisher: [Read original article]() Author: Rajrupa Roychowdhury Published: 2026-07-29T13:05:29Z Content type: article Language: en Sources: [BrowserStack Blog]() Topics: [Testing](), [Artificial Intelligence](), [Test automation](), [MCP Server](), [ide](), [Mobile](), [Accessibility](), [API](), [selectors]() Tags: [accessibility](), [ai](), [ai-agents](), [api](), [ide](), [logs](), [mcp-server](), [mobile](), [qa](), [selectors](), [test-companion](), [testing](), [workflows]() ### AI overview The article introduces BrowserStack Test Companion, an agentic AI test-automation tool embedded in the IDE. It is designed to help SDETs and QA teams author, execute, debug, and maintain web and mobile tests faster while preserving their existing frameworks, tools, standards, and governance. Described capabilities include generating functional, visual, accessibility, and API tests; debugging failures; analyzing logs; suggesting fixes; repairing brittle selectors and assertions; and running exploratory testing. ### Source excerpt Test Companion builds on BrowserStack's growing AI portfolio, bringing intelligent testing directly into the IDE. Combined with our BrowserStack MCP Server and specialised AI agents, it helps QA teams move faster without changing the way they already work. ## Cypress Ambassador Spotlight: Boris Selivanov DevFeed: [Cypress Ambassador Spotlight: Boris Selivanov]() Original publisher: [Read original article]() Published: 2026-07-24T13:43:32Z Content type: opinion Language: en Sources: [Cypress Blog]() Topics: [Cypress](), [Test automation](), [Testing](), [selectors](), [race-condition](), [Network](), [npm]() Tags: [ambassador](), [automation](), [cypress](), [flaky](), [how-to](), [npm](), [race-condition](), [selectors](), [testing]() ### AI overview This Cypress Ambassador Spotlight presents Boris Selivanov's advice on sharing reusable testing patterns, choosing stable selectors, and building scalable test automation. It highlights cy.intercept() for controlling network traffic and reducing flaky tests, recommends retry-ability and aliases instead of arbitrary cy.wait(ms), and suggests starting with a real application test after installing Cypress. ### Source excerpt What motivates you to be a Cypress Ambassador? I see being an Ambassador as the ultimate form of asynchronous collaboration. My goal is to share things that move the needle for other engineers. By comparing how different teams solve the same testing problems, we can turn isolated project victories into shared wins. How do you currently help others that are either using Cypress or interested in using Cypress? I'm the person teammates ping when a test goes flaky or they're not sure how to appro ## Cypress Ambassador Spotlight: Javier Flores DevFeed: [Cypress Ambassador Spotlight: Javier Flores]() Original publisher: [Read original article]() Published: 2026-07-16T21:08:08Z Content type: opinion Language: en Sources: [Cypress Blog]() Topics: [Cypress](), [Testing](), [Cucumber](), [Bootcamp](), [selectors](), [debugging](), [Automation]() Tags: [ambassador](), [automation](), [community](), [cypress](), [debugging](), [flaky](), [learning](), [projects](), [selectors](), [testing]() ### AI overview This interview highlights Javier Flores's work as a Cypress Ambassador, QA Automation Lead, mentor, and bootcamp instructor. It discusses practical Cypress testing, Cucumber exercises, interactive time-travel debugging, automatic waiting, deterministic tests, stable selectors, and beginner-friendly end-to-end testing practices. ### Source excerpt What motivates you to be a Cypress Ambassador? I want to help grow a strong, practical testing community around Cypress. I show people working code and let them build confidence by doing. That's the same philosophy behind the bootcamp I run: everyone leaves with their own repo, not just notes. How do you currently help others that are either using Cypress or interested in using Cypress? I mentor teammates and collaborate closely with developers and product owners to improve testing practices ## DOM State Clarity With cy.depends Command DevFeed: [DOM State Clarity With cy.depends Command]() Original publisher: [Read original article]() Author: Gleb Bahmutov Published: 2026-05-22T04:00:00Z Content type: tutorial Language: en Sources: [Gleb Bahmutov]() Topics: [Cypress](), [Document Object Model (DOM)](), [selectors](), [web applications]() Tags: [backend](), [cypress](), [errors](), [network](), [process](), [selectors](), [test]() ### AI overview This tutorial shows how to use the cy.depends query command from the cypress-if plugin to handle multiple possible DOM outcomes in Cypress tests. It demonstrates waiting for success and error selectors simultaneously and performing an action based on the first selector matched. ### Source excerpt Imagine a simple web application scenario: you click on a button. App tries to load some data. The data might load, or the backend might ## New Maestro Studio DevFeed: [New Maestro Studio]() Original publisher: [Read original article]() Author: Manu Armani Published: 2026-04-21T22:36:00Z Content type: release Language: en Sources: [mobile.dev - Medium]() Topics: [Mobile](), [Testing](), [Tool](), [selectors](), [Emulator]() Tags: [amazon](), [autocomplete](), [cli](), [developers](), [emulator](), [maestro](), [meta](), [testing](), [ui-testing]() ### AI overview Maestro announces a redesigned Maestro Studio desktop app for mobile UI testing. The release adds contextual autocomplete for commands, arguments, and selectors, emulator-assisted test creation, and more robust device connections, while existing tests continue to work without migration. ### Source excerpt Maestro Studio is the desktop app for mobile UI testing. Now completely redesigned, with contextual autocomplete. ## DAST without disruption: Burp Suite DAST winter update 2025 DevFeed: [DAST without disruption: Burp Suite DAST winter update 2025]() Original publisher: [Read original article]() Author: Rob Samuels Published: 2025-12-11T13:09:30Z Content type: release Language: en Sources: [PortSwigger Blog]() Topics: [Application Security](), [Security](), [CI/CD](), [Authentication](), [Deployment](), [API](), [OpenAPI Specification](), [Postman](), [JavaScript](), [CSS](), [selectors](), [Single-page application (SPA)]() Tags: [2025](), [authentication](), [automation](), [ci-cd](), [deployment](), [environment-variables](), [javascript](), [openapi](), [real-time](), [responses](), [security](), [selectors](), [troubleshooting](), [ui](), [update]() ### AI overview A winter 2025 update to Burp Suite DAST adds scan freeze windows, improved site and folder management, editable recorded login flows, real-time authentication diagnostics, XPath and CSS session checks, and imports for Postman collections with environment variables. The changes aim to make automated application and API security scanning more reliable and easier to manage at scale. ### Source excerpt AppSec teams are under constant pressure to secure fast-moving applications without slowing anything down. But scanning windows, fragile authentication, and sprawling API estates often get in the way ## Tell Copilot Where To Find Test Selectors DevFeed: [Tell Copilot Where To Find Test Selectors]() Original publisher: [Read original article]() Author: Gleb Bahmutov Published: 2025-09-22T04:00:00Z Content type: tutorial Language: en Sources: [Gleb Bahmutov]() Topics: [Cypress](), [selectors](), [GitHub Copilot](), [AI-assisted coding](), [Testing](), [Visual Studio Code]() Tags: [ai](), [copilot](), [cypress](), [guide](), [products](), [selectors](), [testing](), [tests](), [vscode]() ### AI overview This tutorial explains how to use GitHub Copilot instruction files to help generate more precise Cypress end-to-end tests. It recommends pointing Copilot to application source files so it can identify stable, test-specific selectors instead of guessing generic or misleading selectors. ### Source excerpt I have shown how to use Copilot instructions fil ## Automating Apple Maps End-to-End Tests with Maestro DevFeed: [Automating Apple Maps End-to-End Tests with Maestro]() Original publisher: [Read original article]() Author: Leland Takamine Published: 2025-09-04T00:00:00Z Content type: tutorial Language: en Sources: [mobile.dev - Medium]() Topics: [Testing](), [YAML](), [selectors]() Tags: [accessibility](), [apple](), [e2e-testing](), [maestro](), [yaml]() ### AI overview A step-by-step tutorial showing how to automate an Apple Maps flow with Maestro. The example uses a YAML test to search for Apple HQ, explore Look Around, navigate dynamically, and verify UI details with selectors and assertions. ### Source excerpt Automate Apple Maps with Maestro. A step-by-step E2E test in simple YAML - readable, reliable, and flake-free. ## Case Insensitive CSS Attribute Selector DevFeed: [Case Insensitive CSS Attribute Selector]() Original publisher: [Read original article]() Author: David Walsh Published: 2024-06-19T11:31:27Z Content type: tutorial Language: en Sources: [David Walsh]() Topics: [CSS](), [selectors](), [Web Development]() Tags: [css](), [css-quick-tips](), [quick-tips](), [selectors]() ### AI overview This article explains how to use the case-insensitivity flag in CSS attribute selectors to match attribute values without regard to letter case. It notes that the technique has limited use cases and should be applied sparingly. ### Source excerpt CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case! Adding a {space}i to the attribute selector brackets will make [...] The post Case Insensitive CSS Attribute Selector appeared first on David Walsh Blog. ## Bootstrap 5.3.3 DevFeed: [Bootstrap 5.3.3]() Original publisher: [Read original article]() Author: Julien Déramond Published: 2024-02-20T15:22:00Z Content type: release Language: en Sources: [Bootstrap.com]() Topics: [Bootstrap](), [bug](), [Documentation](), [Sass](), [selectors](), [Vite]() Tags: [bug-fixes](), [css](), [documentation](), [improvements](), [release](), [selectors](), [vite]() ### AI overview Bootstrap v5.3.3 is a release focused on bug fixes, documentation improvements, and color-mode enhancements. It updates Sass variable imports, fixes a selector-engine regression involving multiple IDs, adjusts color-mode behavior and documentation, and includes miscellaneous component, validation, accessibility, and RTL fixes. ### Source excerpt Bootstrap v5.3.3 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights! Highlights Fixed a breaking change introduced with color modes where it was required to manually import variables-dark.scss when building Bootstrap with Sass. Now, _variables.scss will automatically import _variables-dark.scss. If you were already importing _variables-dark.scss manually, you should keep doing it as it won't break anything and will be the way to go in v6. Fixed a regression in the selector engine that wasn't able to handle multiple IDs anymore. Color modes Badges now use the .text-bg-* text utilities to be certain that the text is always readable (especially when the customized colors are different in light and dark modes). Fixed our color-modes.js script to handle the case where the OS is set to light mode and the auto color mode is used on the website. If you copied the script from our docs, you should apply this change to your own script. Fixed color schemes description in the color modes documentation to show that color-scheme() only accept light and dark values as parameters. Miscellaneous Allowed
,
and
in the sanitizer. Dropped evenly items distribution for modal and offcanvas headers. Fixed the accordion CSS selectors to avoid inheritance issues when nesting accordions. Fixed the focus box-shadow for the validation stated form controls. Fixed the focus ring on focused checked buttons. Fixed the product example mobile navbar toggler. Changed the RTL processing of carousel control icons. Docs Dropped unnecessary right margin for example code blocks. Fixed emphasis text utilities usage in background utilities examples section. Added an technical explanation on how to render an accordion expanded by default. Changed Vite config path import in Vite guide. Enhanced the card image description of the .card-img-* classes. Mentioned shift-color() function in the Sass customization page among ## MDN doc updates: CSS selectors & media queries, WebGPU & WebTransport APIs, Progressive web apps DevFeed: [MDN doc updates: CSS selectors & media queries, WebGPU & WebTransport APIs, Progressive web apps]() Original publisher: [Read original article]() Author: dipika-bhattacharya Published: 2023-06-13T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Web Development](), [selectors](), [Media Queries](), [Web platform](), [webgpu](), [ECMAScript]() Tags: [apis](), [css](), [firefox](), [javascript](), [media](), [selectors](), [web](), [webgpu]() ### AI overview MDN highlights documentation updates covering CSS selector syntax, expanded CSS media-query support, WebGPU and WebTransport APIs, ECMAScript modules, and progressive web apps. The article also notes browser-specific support, including new or experimental features in Firefox and Safari. ### Source excerpt Discover CSS :lang(), experimental media queries, manipulating graphics with WebGPU, client-server communication with WebTransport, ECMAScript module support, and more. ## Astro 2.4 DevFeed: [Astro 2.4]() Original publisher: [Read original article]() Author: Matthew Phillips Published: 2023-05-04T00:00:00Z Content type: release Language: en Sources: [The Astro Blog]() Topics: [Astro](), [CSS](), [Server-side rendering](), [selectors](), [Web Development]() Tags: [astro](), [css](), [experimental](), [features](), [ssr]() ### AI overview Astro 2.4 introduces stronger opt-in CSS scoping, component improvements including an upgraded Shiki integration, server-side rendering support for sitemaps, experimental middleware, and experimental CSS inlining. ### Source excerpt Stronger CSS scoping - Code component improvements - Middleware - CSS inlining - More! ## Multi-module Lint Rules Follow Up: Suppressions ☠ DevFeed: [Multi-module Lint Rules Follow Up: Suppressions ☠]() Original publisher: [Read original article]() Author: Zarah Dominguez Published: 2022-02-15T00:00:00Z Content type: tutorial Language: en Sources: [Zarah Dominguez]() Topics: [modules](), [XML](), [test](), [selectors]() Tags: [android](), [deprecated](), [errors](), [lint](), [module](), [selectors](), [test](), [tests](), [xml]() ### AI overview A follow-up tutorial on adding suppression checks to a multi-module Lint rule that detects deprecated colours in XML files. It explains checking suppression before reporting issues and adding tests for suppressed usages in widgets and root layout elements. ### Source excerpt It has been a hot minute since I posted about writing multi-module Lint rules so it's time for a follow up. Today's topic: suppressions! A quick recap of where we are: ## Updated Pluralsight Course - Configuring and Managing Kubernetes Storage and Scheduling DevFeed: [Updated Pluralsight Course - Configuring and Managing Kubernetes Storage and Scheduling]() Original publisher: [Read original article]() Author: Anthony Nocentino Published: 2022-01-11T00:00:00Z Content type: release Language: en Sources: [Kubernetes on Anthony Nocentino's Blog]() Topics: [Kubernetes](), [Pluralsight](), [configuration](), [data](), [Provisioning](), [selectors]() Tags: [administration](), [configuration](), [container](), [containers](), [course](), [data](), [deprecated](), [developer](), [kubernetes](), [learning](), [pluralsight](), [selectors](), [storage](), [training]() ### AI overview An updated Pluralsight course teaches Kubernetes storage, configuration, and Pod scheduling. It covers persistent storage, environment variables, Secrets, ConfigMaps, provisioning, scheduling controls, and updated techniques for tagging and pushing images with ctr. ### Source excerpt My updated course "Configuring and Managing Kubernetes Storage and Scheduling" is now available on Pluralsight here! If you want to learn about the course, check out the trailer here, or if you're going to dive right in, check it out here! This course teaches you how to decouple state and configuration from your Pod's lifecycle using persistent storage and configuration as data and how to schedule Pods to Nodes in your Kubernetes cluster. ## Redux to Apollo: Data Access Patterns DevFeed: [Redux to Apollo: Data Access Patterns]() Original publisher: [Read original article]() Author: Dan Reynolds Published: 2021-01-29T11:30:04Z Content type: tutorial Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [Redux](), [GraphQL](), [selectors](), [migration](), [React]() Tags: [apollo-client](), [graphql](), [migration](), [redux](), [selectors](), [state-management]() ### AI overview This article describes NerdWallet's migration from a React-Redux codebase to Apollo for client-side state management. It focuses on implementing data access, filtering, transformation, side-effect handling, and Redux-selector-like patterns with GraphQL and Apollo Client. ### Source excerpt As part of NerdWallet's migration from our React-Redux code base to client state management using Apollo, we've been exploring how to effectively implement data access patterns, side-effects handling, and other aspects of client state management using GraphQL and Apollo Client. This first post examines how we accomplish effective data access, filtering and transformation on the client like we currently do using Redux selectors. ## Kotlin Mumbai: Dissecting Coroutines DevFeed: [Kotlin Mumbai: Dissecting Coroutines]() Original publisher: [Read original article]() Author: Siddhesh Patil Published: 2020-11-28T09:48:16Z Content type: article Language: en Sources: [Sid Patil - Android Engineer and Kotlin Advocate]() Topics: [Coroutines](), [Kotlin](), [Library](), [selectors]() Tags: [best-android-developer-groups-in-india](), [coroutines](), [developer](), [developer-communities-in-mumbai](), [event](), [flow](), [google-developer-experts](), [kotlin](), [kotlin-mumbai](), [kotlin-user-group-mumbai](), [kug](), [learnings](), [mohit-sarveiya](), [mohit-sarveiya-gde-for-kotlin](), [q-a](), [selectors](), [talk](), [using-cooroutines-in-kotlin]() ### AI overview An overview of a Kotlin Mumbai talk on Kotlin coroutines, covering how coroutines work, the coroutines library, Flows, Channels, shared state, selectors, and actors, followed by a question-and-answer session. ### Source excerpt Mohit Sarveiya walks us through using coroutines in Kotlin and how they work under the hood. In this talk, we will explore basic to advanced features provided by the coroutines library. ## Access Angular Material's MatSelect Options Panel Container DevFeed: [Access Angular Material's MatSelect Options Panel Container]() Original publisher: [Read original article]() Published: 2020-09-12T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Material Design](), [Document Object Model (DOM)](), [selectors]() Tags: [angular](), [angular-material](), [component](), [selectors]() ### AI overview This tutorial explains how to programmatically access Angular Material's MatSelect options panel from a directive. It explains why the rendered options are not child elements of MatSelect in the DOM and recommends using the exposed panel reference instead of broad global DOM queries. ### Source excerpt Lorem ipsum dolor sit amet ## ::part and ::theme, an ::explainer DevFeed: [::part and ::theme, an ::explainer]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2017-12-18T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [Web Components](), [CSS](), [selectors](), [Document Object Model (DOM)](), [web-standards]() Tags: [components](), [css](), [deprecated](), [explainer](), [polyfill](), [properties](), [selectors](), [syntax]() ### AI overview This explainer reviews proposals for styling and theming Shadow DOM components, including shadow-piercing selectors, custom CSS properties, and the proposed ::part and ::theme approaches. It notes that the relevant specification was not yet final and that no reliable polyfill was available at the time. ### Source excerpt Updated May 18, 2020 (get it? :: ? I made a funny) Shadow DOM is a spec that gives you DOM and style encapsulation. This is great for reusable web components, as it reduces the ability of these components' styles getting accidentally stomped over (the old "I have a class called "button" and you have a class called "button", now we both look busted" problem), but it adds a barrier for styling and theming these components deliberately. Since a lot has changed since the last time I talked about styling the Shadow DOM, I wanted to give you a quick update about what new specs were in the works! Please note that this spec isn't quite final, which means that a) the syntax and capabilities will likely change and b) there isn't a polyfill you can use for realsies. --- Ok, so. When talking about styling a component, there are usually two different problems you might want to solve: 💇 Styling: I am using a third-party element on my site and I want this one to be blue 🎨 Theming: I am using many third-party elements on my site, and some of them have a ; I want all the s to be blue. Here's almost everything I know on this topic. A trip through time There have been several previous attempts at solving this, some more successful than others. If you've read my last post about this, you're already caught up. If you haven't, here's the deets: First came :shadow and /deep/ (which have since been deprecated, and removed as of Chrome 60). These were shadow-piercing selectors that allowed you to target any node in an element's Shadow DOM. Apart from being terribad for performance, they also required the user of an element to be intimately familiar with some random element's implementation, which was unlikely and lead to them just breaking the whole element by accident Custom properties allow you to create custom CSS properties that can be used throughout an app. In particular, they pierce the shadow boundary, which means they can be used for styli ## jQuery/CSS Style Selectors for Codename One DevFeed: [jQuery/CSS Style Selectors for Codename One]() Original publisher: [Read original article]() Author: Steve Hannah Published: 2017-03-15T00:00:00Z Content type: tutorial Language: en Sources: [CodeName One]() Topics: [selectors](), [jQuery](), [CSS](), [Mobile](), [ui]() Tags: [css](), [how-to](), [javascript](), [library](), [mobile](), [selectors](), [ui]() ### AI overview This tutorial introduces Codename One's ComponentSelector class, which is heavily influenced by jQuery. It explains CSS-like component selection, a fluent API, set-based operations, and effects such as fading and sliding components. ### Source excerpt The ComponentSelector class is a new class that brings the power of jQuery to Codename One. While it is not actually jQuery, it is heavily influenced by it. If you're not familiar with jQuery, here is the 10 second intro. jQuery is a javascript library, created by John Resig in 2006, that has become a staple of browser-based UI development. As of March 2017, over 70% of web sites are using jQuery. The initial problem that jQuery solved was browser incompatibility issues. It provided a consistent API for most useful DOM methods so that the developer didn't have to spend all their days and nights fighting with browser compatibility issues. In a way, it did for Javascript, what Codename One does for mobile apps. ## Rendering ONLY Children in XHP DevFeed: [Rendering ONLY Children in XHP]() Original publisher: [Read original article]() Author: Codebeforethehorse Published: 2014-03-27T19:54:00Z Content type: tutorial Language: en Sources: [Stefan Parker]() Topics: [ui](), [selectors](), [jQuery](), [Web Development]() Tags: [selectors](), [ui](), [xhp]() ### AI overview This tutorial explains how to use XHP rendering priority and :x:primitive to render only the augmented children of an element. It demonstrates the technique with Facebook news feed lists that add class names to children before appending them through an AJAX request. ### Source excerpt My last post, Rendering NULL in XHP, surprised a bunch of people by the use of extending :x:primitive to handle children rendering before the parent's rendering. So I thought I'd quickly discuss another useful trick you can do by extending :x:primitive, this one deals with getting just the children from elements that alter their children before rendering. There are a few cases where you want this to happen. For instance, Facebook has an element , which allows engineers to make lists with pre-defined spacing and border colors. The news feed is one of these lists. The problem we had was that we needed to add class names to its children because we couldn't use CSS selectors to target direct children (specifically, the > selector, which IE6 didn't support). So we had to add class names like .uiListSmallVerticalPadding to every child element. Keeping this logic inside meant we only needed to specify the spacing once and it would remain uniform over the whole list. This works fine until we need to append more children through an AJAX request. When we load more news feed stories we need to create another , render it, but then remove the root element and only append its children to the existing news feed. :x:primitive to the rescue! We can use the rendering priority of :x:primitive to create an element that will let its child render first (adding class names to its children) and then remove the root. class :render-children extends :x:primitive { children (:xhp); protected function stringify() { $xhp = {$this->getFirstChild()->getChildren()} ; return :xhp::renderChild($xhp); } } Now we're left with the augmented children to append to the existing list. Easy peasy. [Next page]()