Are Nodes Distributed and Styled in Polymer's Network?

Let's imagine I have created two unique custom elements as extensions of the innovative Polymer Element:

  • c-el1
  • c-el2

Here is how they are templated:

c-el1

<dom-module id="c-el1">
    <template>
        <style>
            p{
               color:red;
             }
        </style>
        <c-el2>
            <p>custom text</p>
        </c-el2>
    </template>
</dom-module>

c-el2

<dom-module id="c-el2">
    <template>
        <style>
            p::slotted(*){
               color:green;
             }
        </style>
       <p> <slot></slot></p>
    </template>
</dom-module>

If the P element with custom text is slotted in, will it be displayed in green or red?

Currently, the custom element c-el1 applies styles to the P element with custom text, which is slotted into c-el2.

Answer №1

<p> is displayed in a red color as the styles from c-el1 take precedence over those from c-el2

In case you are not applying any styles to the <p> within c-el1, the correct method to target the slotted element in c-el2 would be:

<dom-module id="custom-el2">
  <template>
    <style>
      :host ::slotted(p) {
        color: green;
      }
    </style>
    <slot></slot>
  </template>
  <script>
    class CustomEl2 extends Polymer.Element {
      static get is() { return 'custom-el2'; }
    }
    window.customElements.define(CustomEl2.is, CustomEl2);
  </script>
</dom-module>

For further information on styling Polymer's <slot>, visit: Styling Slotted Content

Answer №2

Absolutely! The content within the <slots> of a polymer element is only pre-rendered and pre-styled.

  • This means that the DOM elements are already laid out and styled before being slotted in.
  • However, just because the slot on a custom element is occupied by an element, it does not have priority to style it.

Even if there is a ::slotted rule on the element, any parent element or page using the slot on the custom element will take priority in styling the DOM content.

Citation

Link to Eric's Post

This information should ideally be clearly stated on the official documentation of the site, possibly as a prominent note under styling distributed nodes.

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

Utilizing getter and setter functions within a setter with a type guard

I need to implement a getter and setter in my class. The setter should accept a querySelector, while the getter is expected to return a new type called pageSections. The challenge I'm facing is that both the getter and setter must have the same argum ...

Issue with Ajax form submission on one specific page

My form submission using JQuery AJAX is causing my page to redirect to submit.php instead of staying on the current page. I have tried various solutions but cannot pinpoint the issue... The PHP script seems to be working fine, with only one echo statement ...

Is there a way to condense the row navigation links into a dropdown menu button if the browser window size decreases?

I've noticed that on many websites, when you narrow the width of the browser window, the row of navigation links in the top navigation bar collapses into a dropdown menu button to prevent overflow. How can I implement this feature on my website? Righ ...

Difficulty using Container, Row, and Col components in React-Bootstrap

Currently, I am diving into the world of React and React-Bootstrap to expand my skill set. My focus is on utilizing the React-Bootstrap grid layout effectively. However, I suspect that I might be doing something wrong in my implementation. It seems like t ...

TinyMCE toolbar missing the "hr" option

I am encountering an issue while using TinyMCE as my editor. I have added the plugin as instructed, but I cannot find the "hr" button/option in the editor interface. If anyone has any insights or solutions to this problem, please share! This is how I am ...

Activate the SHIFT key

In the input field for user's firstname, I have restricted all keys to a-z and 0-9 only. This restriction is working well, but I also want to allow the SHIFT key so that users can capitalize letters if needed. Despite trying various solutions, I have ...

Do only the imported functions in a React App contribute to the overall size and overhead for the user?

For instance, my React application relies on the MUI package. However, I am only utilizing the Slider and AutoComplete components from the package. Do only these 2 components impact the performance of my application for the end user? Or does the entire p ...

The menu elegantly glides in from the right, fastening itself to the right edge of

I am struggling with the menu animation on my website. Currently, the menu slides in from the left side and covers 30% of the screen. I want to change it so that it slides in from the right and sticks to the right side of the screen. I've attempted to ...

Ways to keep a div anchored to the bottom of two other divs

I have three div elements each with 33% width. <div class="row"> <div class="col-md-4">a</div> <div class="col-md-4">a</div> <div class="col-md-4">a</div> </div> Is it possible to style the third div ...

Can you explain the contrast between deep and shallow cloning techniques?

When I employ splice to duplicate an array, I receive a shallow copy. However, there seems to be something missing since I end up with multilevel arrays. It appears that the issue lies elsewhere, possibly not related to the array's depth. Can someone ...

Incorporating unique components dynamically using a loop in React

As I delve deeper into learning React and experimenting with some basic concepts, I have encountered a seemingly straightforward issue that has left me stumped. Despite my best efforts to search for a solution online, I have come up empty-handed. The crux ...

Transform audio data URI string into a downloadable file

The audio data is stored by the server as a base64 data string, which is then retrieved and played by the mobile web client. However, there seems to be a problem with playing the audio on mobile Chrome in iOS and Android when using a data uri (issue). I ...

Personalize the appearance of the AWS Cognito sign-in page by adjusting the CSS settings in the cognitoConfig

I have been working on automating the creation of user pools in AWS Cognito. To accomplish this, I am utilizing a yaml file to configure all aspects of the process including user attributes and IDPs. However, I am facing some challenges when it comes to ...

Are none of the page links clickable?

Currently, I am in the process of creating a portfolio website. This is my first attempt at coding HTML and CSS from scratch without the aid of a layout template. I've encountered an issue that has me stumped - the links within the container are not ...

Express JS: The requested resource does not have the 'Access-Control-Allow-Origin' header

Currently, I am encountering an issue with my API running on a server and the front-end client attempting to retrieve data from it. Previously, I successfully resolved the cross-domain problem, but now it seems like something has changed as I am receiving ...

The input type "number" does not seem to be compatible with the currency pipe feature

The currency pipe seems to not be working when using the input type number. The web page is not displaying any value. I have searched various blogs and it appears that the currency pipe only works with input type text, but my requirement necessitates the ...

Arrange documents within gulp-inject index function

I have encountered an Angular error due to the sorting of my files, so I am attempting to organize them properly. This is the content of my Gulp file: var gulp = require('gulp'); var angularFilesort = require('gulp-angular-filesort'); ...

Experience the auditory bliss with Javascript/Jquery Sound Play

I am creating an Ajax-driven application specifically for our local intranet network. After each response from my Ajax requests, I need to trigger a sound in the client's browser. I plan to store a sound file (mp3/wav) on our web server (Tomcat) for ...

Create a virtual camera in Three.js that produces an optically-inverted (mirror-image) result

In my Three.js project, I have a scene with various objects and text that are viewed through a single camera named camera_A. The output of this camera goes to a viewport_A on one part of my webpage. Now, I want to add a second camera (camera_B) that will ...

Steps for redirecting from a URL containing location.hash to a different page

Recently, I decided to move a section of one of my webpages from dummy.com/get-started/#setup to its own page at dummy.com/setup. After making this change, I went ahead and deleted the old /get-started page on my website. Many people have bookmarks saved ...