On Wednesday, March 19, 2014 2:22:09 PM UTC-7, Eric Bidelman wrote:
>
> IIRC, an invalid selector in Blink will make the entire rule not work. So
> even though the second rule is valid, the first (using ::content) is no
> longer valid and the rule is thrown out.
>
This makes sense... However, I can't explain why the following worked then:
:host[direction=up], :host([direction=up]) {
...
}
This was after Chrome had switched to the latter syntax, but Dartium was
still using the former. Maybe it's that :host([direction=up]) wasn't "as
broken" as /content/ from the Blink's perspective? Anyway, that doesn't
matter anymore, I guess.
> FWIW, disruptive changes like this won't happen when the native stuff
> snips. We're so close to that inflection point that final spec updates are
> still being made. It's an unfortunate side effect of using features when
> they're still behind a flag. We've tried to announce Blink updates on this
> list, but it's understandable not everyone sees those updates :)
>
Can't wait until we flip the native support for everything and are in a
more-or-less stable land! :)
> On Mar 19, 2014 3:18 PM, "Sergey Shevchenko"
> <[email protected]<javascript:>>
> wrote:
>
>> Thanks, Steve, Eric and Rob. One more question: I can't get the old and
>> the new syntax to work when the two selectors are separated with a comma
>> and listed in front of a single rule:
>>
>> /* Doesn't work: */
>> ::content > *, * /content/ * {
>> color: red;
>> }
>>
>> /* Works: */
>> ::content > * {
>> color: red;
>> }
>> * /content/ * {
>> color: red;
>> }
>>
>> This is very inconvenient, especially for large rules. We need to keep
>> both for a while for the code to work across the latest Dartium and Chrome
>> on Windows/Max/Linux. I was able to get similar old-vs-new syntax to work
>> before, e.g. when :host.something changed to :host(.something).
>>
>> Also, could changes like this be rolled out gradually, with a
>> transitional period when both syntaxes are supported and the old one
>> reported as deprecated, e.g. in the console? This abrupt change has
>> disrupted our work here at Spark quite a bit yesterday.
>>
>> On Tuesday, March 18, 2014 10:56:48 PM UTC-7, Rob Dodson wrote:
>>>
>>> Hi Hoa,
>>>
>>> I think that would be...
>>>
>>> :host([direction="left"]) > content[select=":nth-child(2)"] /content/ *
>>>
>>>
>>> I think I got that right :) Let me try to explain...
>>>
>>> You no longer need to do :host(.foo:host) to match a shadow host with
>>> class .foo. Previously you needed the second :host in there to make sure
>>> you were selecting only the shadow host and not an ancestor. Now we have
>>> the :ancestor() selector, so :host() only targets the shadow host itself.
>>>
>>> as we mentioned ::content has been replaced by /content/, so that part
>>> changes
>>>
>>> lastly, the thing to the right of /content/ must always be a top level
>>> element. so content /content/ * will select any distributed top level
>>> element, which looks like what you were previously trying to achieve with
>>> ::content > *
>>>
>>> one thing to note, there's a chrome bug that causes /content/ *
>>> .something-else to not work at the moment (https://code.google.com/p/
>>> chromium/issues/detail?id=353606). But I think content /content/ * will
>>> still work... Let me know if you have issues :D
>>>
>>>
>>> On Tue, Mar 18, 2014 at 10:30 PM, Hoa V. Dinh <[email protected]> wrote:
>>>
>>>> Hi,
>>>>
>>>> On the same topic, I was wondering how to write the equivalent of such
>>>> a selector with the new syntax:
>>>> :host([direction="left"]:host) > content[select=":nth-child(2)"]::content
>>>> > *
>>>>
>>>> See:
>>>> https://gist.github.com/dinhviethoa/af8a952892fdf8a8c046
>>>>
>>>> and
>>>>
>>>> https://github.com/dart-lang/spark/tree/master/widgets/lib/
>>>> spark_split_view
>>>>
>>>> Thanks!
>>>>
>>>> --
>>>> Hoa V. Dinh
>>>>
>>>> On Monday, March 17, 2014 at 10:21 PM, Jan Miksovsky wrote:
>>>>
>>>> Eric: Thanks. I could have sworn the native form *didn't* work for me
>>>> in Canary when I posted this, but it works now. So I was either
>>>> hallucinating, or the problem was fixed quickly. Either way, glad to know
>>>> I
>>>> can /content/ as expected.
>>>>
>>>> On Sunday, March 16, 2014 2:40:25 PM UTC-7, Eric Bidelman wrote:
>>>>
>>>> That works for me in the latest Canary (35.0.1895.0). For polyfill
>>>> support, you still need to add the equivalent polyfill-next-selector {}
>>>> rule. This should work in Canary (with flags) and stable:
>>>>
>>>> http://jsbin.com/gacogeda/3/edit
>>>>
>>>> On Fri, Mar 14, 2014 at 6:43 PM, Jan Miksovsky <[email protected]>wrote:
>>>>
>>>> Ah, thanks. I'd seen discussion of /shadow/ and /shadow-deep/, but not
>>>> /content/.
>>>>
>>>> Should /content/ work right now? The updated jsbin at
>>>> http://jsbin.com/gacogeda/2/edit still doesn't seem to work. Or are we
>>>> in some place where ::content no longer works, but /content/ doesn't work
>>>> yet?
>>>>
>>>> On Friday, March 14, 2014 5:41:47 PM UTC-7, Steve Orvell wrote:
>>>>
>>>> Yes, it was changed to match the spec here: http://dev.w3.org/csswg/
>>>> shadow-styling/.
>>>>
>>>> The ::content pseudo-element was removed. The /content/ combinator was
>>>> added. So your rule could be:
>>>>
>>>> content /content/ * { color: red; }
>>>>
>>>> Note, a combinator must have some selector to the left of it.
>>>>
>>>> In addition the ^ and ^^ combinators were renamed to /shadow/ and
>>>> /shadow-deep/.
>>>>
>>>> Hope that helps.
>>>>
>>>> On Fri, Mar 14, 2014 at 5:08 PM, Jan Miksovsky <[email protected]>wrote:
>>>>
>>>> I just upgraded Canary to 35.0.1892.2, and CSS rules with ::content
>>>> CSS selectors no longer seem to be applied as expected. I'm wondering if
>>>> the ::content syntax changed recently.
>>>>
>>>> As far as I know, the syntax for ::content looks like:
>>>>
>>>> ::content * {
>>>> color: red;
>>>> }
>>>>
>>>> This is what's shown in the Guide to Styling article on the Polymer
>>>> site, for example.
>>>>
>>>> Repro: http://jsbin.com/gacogeda/1/edit. This jsbin works in an older
>>>> Canary (35.0.1887.0), but not in the latest Canary.
>>>>
>>>> I also happened to notice a recent Polymer checkin that used a
>>>> different content syntax like:
>>>>
>>>> ::content(*) {
>>>> }
>>>>
>>>> But I haven't seen a breaking change announcement anywhere — did I miss
>>>> it?
>>>>
>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>> ---
>>>> You received this message because you are subscribed to the Google
>>>> Groups "Polymer" group.
>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>> an email to [email protected].
>>>>
>>>> To view this discussion on the web visit https://groups.google.com/d/ms
>>>> gid/polymer-dev/ad7d90f6-16de-43b2-9ce1-20d019f6ff36%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/ad7d90f6-16de-43b2-9ce1-20d019f6ff36%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>> .
>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>>>
>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>> ---
>>>> You received this message because you are subscribed to the Google
>>>> Groups "Polymer" group.
>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>> an email to [email protected].
>>>> To view this discussion on the web visit https://groups.google.com/d/ms
>>>> gid/polymer-dev/42675d85-a29e-45b2-bfa7-ecded1ca6b98%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/42675d85-a29e-45b2-bfa7-ecded1ca6b98%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>> .
>>>>
>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>>>
>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>> ---
>>>> You received this message because you are subscribed to the Google
>>>> Groups "Polymer" group.
>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>> an email to [email protected].
>>>> To view this discussion on the web visit https://groups.google.com/d/
>>>> msgid/polymer-dev/208ac81a-4d90-4d37-a032-490ae0416540%
>>>> 40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/208ac81a-4d90-4d37-a032-490ae0416540%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>> .
>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>>>
>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>> ---
>>>> You received this message because you are subscribed to the Google
>>>> Groups "Polymer" group.
>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>> an email to [email protected].
>>>> To view this discussion on the web visit https://groups.google.com/d/
>>>> msgid/polymer-dev/D1C7319E23C94F2588AB61D134DA23D5%40google.com<https://groups.google.com/d/msgid/polymer-dev/D1C7319E23C94F2588AB61D134DA23D5%40google.com?utm_medium=email&utm_source=footer>
>>>> .
>>>>
>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>>
>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "Polymer" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected] <javascript:>.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/9b750e05-4e4c-4c1e-872b-78112e56f740%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/9b750e05-4e4c-4c1e-872b-78112e56f740%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/d5da6634-1965-432e-8d76-f9d4d764a3b2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
