How can I use the :first-child selector w/ shadow DOM's <content> element?

Nevir

I'd like to extract the first paragraph from a custom element's content (as a summary). I would expect the following to work:

<polymer-element name="x-thing" noscript>
  <template>
    <segment class="summary">
      <content select="p:first-child"></content>
    </segment>
    <segment>
      <content></content>
    </segment>
  </template>
</polymer-element>

Unfortunately, the <content select="p:first-child"> doesn't appear to match anything :(

Here's a corresponding codepen.

ebidel

Only :not() is supported in the Shadow DOM spec: http://w3c.github.io/webcomponents/spec/shadow/#dfn-matching-criteria

Relevant bug: http://crbug.com/343332

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How can I use the :first-child selector w/ shadow DOM's <content> element?

From Dev

How can I use the :nth-child() selector starting from the last element, rather than the first?

From Java

How can i check whether an element can host Shadow DOM?

From Dev

How do I use the nth-child selector with jquery's child selector?

From Dev

Can't use first-of-type selector with child selector

From Dev

Can't use first-of-type selector with child selector

From Dev

Shadow Dom ::content css selector priority?

From Dev

How can I use a ::before selector at the bottom of my element?

From Dev

How can I make a div with a box-shadow overlay its h1 child element?

From Dev

How can I make a div with a box-shadow overlay its h1 child element?

From Dev

How to Get A Element First Child Text Using Jquery And Class Selector?

From Dev

How to use js to query shadow dom element in Polymer?

From Dev

How can I override a child element's style settings?

From Dev

How do I style the content in a child element?

From Dev

How to not render the content in the <content> tag in Shadow DOM?

From Dev

Using AngularJS Jqlite, how can I find the first child of an element that is of a certain element type?

From Dev

Using AngularJS Jqlite, how can I find the first child of an element that is of a certain element type?

From Dev

How can I use a box-shadow on an element that has background-size:contain?

From Dev

Can I use insertAdjacentHTML to insert DOM element

From Dev

Apply pseudo-element CSS selector inside shadow DOM

From Dev

How can I print DOM Content recursively?

From Dev

How do I use the jquery child selector (>) with a variable?

From Dev

How i can do to animate shadow of the element with jquery?

From Java

How can I add a box-shadow on one side of an element?

From Dev

How can I exclude last two child elements with CSS selector?

From Dev

How can i drag a hidden child element

From Dev

How can I get the id of a child element/

From Dev

Can't get first child selector to work

From Dev

How can I use jQuery to access an element that's stored in an array?

Related Related

  1. 1

    How can I use the :first-child selector w/ shadow DOM's <content> element?

  2. 2

    How can I use the :nth-child() selector starting from the last element, rather than the first?

  3. 3

    How can i check whether an element can host Shadow DOM?

  4. 4

    How do I use the nth-child selector with jquery's child selector?

  5. 5

    Can't use first-of-type selector with child selector

  6. 6

    Can't use first-of-type selector with child selector

  7. 7

    Shadow Dom ::content css selector priority?

  8. 8

    How can I use a ::before selector at the bottom of my element?

  9. 9

    How can I make a div with a box-shadow overlay its h1 child element?

  10. 10

    How can I make a div with a box-shadow overlay its h1 child element?

  11. 11

    How to Get A Element First Child Text Using Jquery And Class Selector?

  12. 12

    How to use js to query shadow dom element in Polymer?

  13. 13

    How can I override a child element's style settings?

  14. 14

    How do I style the content in a child element?

  15. 15

    How to not render the content in the <content> tag in Shadow DOM?

  16. 16

    Using AngularJS Jqlite, how can I find the first child of an element that is of a certain element type?

  17. 17

    Using AngularJS Jqlite, how can I find the first child of an element that is of a certain element type?

  18. 18

    How can I use a box-shadow on an element that has background-size:contain?

  19. 19

    Can I use insertAdjacentHTML to insert DOM element

  20. 20

    Apply pseudo-element CSS selector inside shadow DOM

  21. 21

    How can I print DOM Content recursively?

  22. 22

    How do I use the jquery child selector (>) with a variable?

  23. 23

    How i can do to animate shadow of the element with jquery?

  24. 24

    How can I add a box-shadow on one side of an element?

  25. 25

    How can I exclude last two child elements with CSS selector?

  26. 26

    How can i drag a hidden child element

  27. 27

    How can I get the id of a child element/

  28. 28

    Can't get first child selector to work

  29. 29

    How can I use jQuery to access an element that's stored in an array?

HotTag

Archive