What is the best way to target the nth-child() of a slotted element within a web component that utilizes multiple uniquely named slots?

I am struggling to select the second slotted item in a specific slot using 

slot[name=foo]::slotted(:nth-child(2)){
, but it's not behaving as I anticipated. Even though the first foo slot is styled with green, the second one doesn't follow suit.

Within my web component, I have a default slot and named slots for both foo and bar. My goal is to style the second slotted foo element.

Unfortunately, none of these CSS selectors within the template are yielding the desired results:

  slot[name=foo]::slotted(:nth-child(2)){
    outline: 2px solid green;
  }
  
  ::slotted(slot[name=foo]:nth-child(2)){
    outline: 2px solid green;
  }
  
  ::slotted(slot[name="foo"]:nth-child(2)){
    outline: 2px solid green;
  }

For reference, here is my jsfiddle link: https://jsfiddle.net/donohueseth/msxojtac/14

Is there a way to properly target the nth-child() of a slotted element when a web component has multiple different named slots?

javascriptcssweb-component

Answer №1

:nth-child(numberHere) will select the specific child element that is the nth child from the parent. In this case, you need to use :nth-of-type(numberHere) instead. This selector targets elements that are of a specific type and meet the criteria specified in the square brackets.

::slotted([slot=foo]:nth-of-type(2)){
  outline: 2px solid green;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Don't forget to save the selected date in the datepicker

I have a datepicker with two text fields: fromdate and todate. When I input the month of May and submit, then input another date, the default date should remain as May, instead of changing to the current month. Check out my code below. $(function() { ...

javascriptjquerycodeigniter

Creating a persistent toolbar in Vuetify: Tips and tricks

Within my Vuetify app, I've implemented a toolbar: <v-toolbar dark color="primary"> <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon> <v-toolbar-title>{{drawer.title}}</v-toolb ...

javascriptvue.jsvuejs2vuetify.js

Is there a way to incorporate both max-width and min-width in a matchMedia query effectively?

I'm currently utilizing the matchMedia API in my JavaScript code to identify viewports, with the goal of reducing DOM manipulations. Instead of using display: none extensively, I am opting for a v-if directive from Vue to determine when elements are ...

javascriptvue.jsmatchmedia

Retrieve a true value by using either Array.some or _.some

I am looking to retrieve a truthy value from the array.Some other than "true", This is my approach: let category; arduair.aqi_ranges[pollutant].some((item,index)=> { let min = item.range[0]; let max = item.range[1]; if (_.inRange(c,min,max)){ ...

javascriptnode.jslodash

ReactJS encountered an error: [function] is not defined, July 2017

Attempting to convert a JSON file into an array and then randomly selecting 5 items from it. I suspect the issue lies in my render/return statement at the end of ImageContainer.js, but as a newbie in ReactJS, it could be anything. Any assistance or guida ...

javascriptjsonreactjs

Issue while rendering Vuex

Currently in the process of setting up a project using Vuex and Vue, I have encountered a peculiar issue. It seems to be related to the order of rendering, but despite multiple attempts to modify the code, the problem persists. My approach involved access ...

javascriptvue.jsvuexvuex-modules

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...

javascriptjqueryhtmlcsssharepoint

Guide to creating a nested table with JavaScript

Currently, I am utilizing JavaScript to dynamically generate a table. To better explain my inquiry, here is an example of the HTML: <table id='mainTable'> <tr> <td> Row 1 Cell 1 </td> ...

javascripthtmldynamichtml-table

Disabling the movement of arrows in the client-testimonials-carousel plugin

This plugin that I'm currently using is working flawlessly: However, I'm unsure about how to make the arrows stationary and prevent them from moving. Currently, they are centering themselves based on the height of the div, but I want them to rem ...

javascriptjqueryhtmlcss

What is the best way to make a gradient fill and rounded border with CSS?

I am interested in creating a gradient and rounded border similar to the top bar on Instagram. Although I know how to create a rounded and solid border, this one utilizes a gradient. It appears that Instagram uses a canvas, but I am wondering if it can b ...

htmlcssfrontend

Using jsdom as a package in a Meteor application is not possible

Recently, I came across an issue with my packages.json file. It looks like this: { "jsdom" : "0.8.0", "request" : "2.25.0" } As part of my project, I have the following code snippet: if (Meteor.isServer) { Meteor.startup(function () { var _ ...

javascriptnode.jsmeteornpm

RaphaelJS: Ensuring Consistent Size of SVG Path Shapes

I am currently constructing a website that features an SVG map of the United States using the user-friendly usmap jQuery plugin powered by Raphael. An event is triggered when an individual state on the map is clicked. However, when rendering a single stat ...

javascriptjquerysvgraphael

Reorganize array of objects in JavaScript

So I am working with an array of objects structured like this: const data= [ { id: '6397f6f46b18bc89cb37053c', cost_center: null, plant: null, material: null }, { id: '6397f7166b18bc89cb372ff7', cost_center: &apo ...

javascriptarraysobject

Alert: '[Vue warning]: Directive "in testing" could not be resolved.'

Currently, I am running unit tests within a Vue 2.0 application using PhantomJS, Karma, Mocha and Chai. Although the tests are passing successfully, I am encountering a warning message with each test indicating an issue like this: ERROR: '[Vue warn ...

javascriptphantomjsvue.jskarma-mochamocha-phantomjs

Is JavaScript the Key to Navigating Through a Website?

I am faced with the challenge of creating a script to extract a database from a website. The website's main page features a table where each row contains a link to another page that holds the desired database. Currently, my script can successfully e ...

javascripthtmlloops

How can Angular2 detect when an entity is clicked within a window?

There are multiple items generated using *ngFor: <my-item *ngFor="let item of myArray" [p]="item"></my-item> I am able to handle a click event like this: <my-item ... (click)="doWork(item)"></my-item> However, I want to avoid a ...

javascriptangulartypescript

Utilizing Vue to Embed Multiple Hubspot Forms on one Page

While working on a Vue page, I encountered an issue with loading multiple Hubspot forms simultaneously. Only one form would load at a time. Here is the code snippet I used to append a single Hubspot form: mounted() { const script = document.createElem ...

javascriptvue.jsnuxt.js

Executing a Callback in Node with Redis Publish/Subscribe

Is it possible to implement callback with the PubSub design pattern in Node Redis? For example: server.publish("someChanel", someData, function(response) { // Expecting a response from client }); client.on('message', function(channel, data, ...

javascriptnode.jsredisnode-redis

The Tailwind classes applied directly in HTML are not functional, whereas the ones from the external CSS file are effective

After testing the classes, the intended look of the page should resemble this: https://i.stack.imgur.com/BVs57.png However, it currently appears like this: https://i.stack.imgur.com/AjN3z.png The JSX code in the file is as follows: < ...

cssnext.jstailwind-css

Tips for effectively handling a prop in an HTML form using Vue.js and avoiding infinite loops with a computed property

I have a Vue.js form for signing up that features numerous similar fields. From my understanding, I should initialize the values as props rather than objects or arrays (since they will be pass-by-value). My approach involves using a computed property with ...

javascriptvue.js