Creating Custom Styles with Polymer for <content> Elements

Question

Creating Custom Styles with Polymer for <content> Elements

Seeking help with styling using the ::content selector and custom CSS properties. Any insight would be appreciated!

To simplify, I have a Polymer component utilizing a content tag that will always contain a paper-input:

<template>
  <style>
    #container ::content paper-input {
      --paper-input-container-focus-color: #ddd;
      margin: 8px;
    }     
  </style>
  <div id="container">
    <content></content>
  </div>
</template>

Testing reveals that the margin is correctly applied, but the custom css property is not. Is my goal unattainable?

css polymer shadow-dom

Answer 1

Answer №1

If you are utilizing Polymer 1.6+, you have the option to enable native css by using useNativeCSSProperties. For those working with version 1.7, it is recommended to utilize slot instead of content as Polymer will be transitioning to this in V2.0+ and it aligns with shadow dom v1. However, it's uncertain if this method will function correctly in IE, since useNativeCssProperties has no impact on IE.

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<script>
  window.Polymer = {
    lazyRegister: true,
    useNativeCSSProperties: true
  }
</script>
<link rel="import" href="paper-input/paper-input.html">
<dom-module id="light-dom">
  <template>
    <style>
      #container ::slotted(paper-input) {
        --paper-input-container-focus-color: #ddd;
      }
    </style>
    <div id="container">
      <slot></slot>
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'light-dom'
  })
</script>


<light-dom>
  <paper-input label="hello"></paper-input>
</light-dom>

Answer 2

If you are utilizing Polymer 1.6+, you have the option to enable native css by using useNativeCSSProperties. For those working with version 1.7, it is recommended to utilize slot instead of content as Polymer will be transitioning to this in V2.0+ and it aligns with shadow dom v1. However, it's uncertain if this method will function correctly in IE, since useNativeCssProperties has no impact on IE.

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<script>
  window.Polymer = {
    lazyRegister: true,
    useNativeCSSProperties: true
  }
</script>
<link rel="import" href="paper-input/paper-input.html">
<dom-module id="light-dom">
  <template>
    <style>
      #container ::slotted(paper-input) {
        --paper-input-container-focus-color: #ddd;
      }
    </style>
    <div id="container">
      <slot></slot>
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'light-dom'
  })
</script>


<light-dom>
  <paper-input label="hello"></paper-input>
</light-dom>

Creating Custom Styles with Polymer for <content> Elements

Answer №1

Similar questions

What could be the reason for the child element not occupying the full height of its parent container?

Python's selenium did not locate the specified CSS element

Updating div width in Laravel blade using expressions or jQuery can be a simple task

Is there a method, like using jQuery, to insert `<br>` tags into each line of a dropdown select list?

Struggling with aligning two divs side by side on an HTML page

Dynamic Email Design

Creating a personalized notification box that is compatible with various screen sizes and web browsers on android devices with the help of

Unable to get the Gtranslate function to function properly within the drop-down menu

How to automatically scroll to the bottom using jquery/css

Create a background for a dropdown list that appears unreachable, positioned above all other elements

Tool for controlling the layout of the viewport with Javascript

A strategy for concealing the selected button within a class of buttons with Vanilla JS HTML and CSS

Issue encountered while determining the specificity of a CSS selector involving pseudo-classes

Align the OutputText centrally within the Div

Trouble arises when trying to override base theme values in Mui 5 with styled components

Enhance the aesthetics of placeholder text in Semantic UI React using CSS styling

Having trouble showcasing two unordered lists side by side on a single line

Adjust the maximum and minimum values on a dual thumb slider

When applying animations to ngIf, the elements end up overlapping

Learn how to separate two SCSS files and compile them into individual CSS files