[polymer-dev] When do I have to call flush() in wct?
With Polymer 1.0, observers are now evaluated synchronously. If I have an element whose behavior is driven by observers on attributes, and everything appears to work in synchronous tests, is there any reason to call flush()? That is, is it necessary that I call it before/after each test? 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 polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/adc4db0a-459d-4abf-ab8f-6453dae62213%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
That said...it appears that the use of CSS custom properties may not be
wise based on current browser support for that feature. Is that the case?
On Thursday, 16 July 2015 15:21:33 UTC-7, Kelly St. John wrote:
Thanks Justin. I just read more of the Styling documentation from the
Styling section of the 1.0 Developer Guide. Here is an important extract
pertaining to my issue (see below). It seems application-wide 'theming'
capability is a bit of a casualty stemmed from the necessary removal of
/deep/ and ::shadow selectors used previously in polymer 0.5. As you
eluded to above, it seems I'll have to look into how to incorporate the use
of Custom CSS properties in order to apply 'theming' across elements.
One solution the Shadow DOM spec authors provided to address the theming
problem are the /deep/ and::shadow combinators, which allow writing rules
that pierce through the Shadow DOM encapsulation boundary. Although Polymer
0.5 promoted this mechanism for theming, it was ultimately unsatisfying for
several reasons:
-
Using /deep/ and ::shadow for theming leaks details of an otherwise
encapsulated element to the user, leading to brittle selectors piercing
into the internal details of an element’s Shadow DOM that are prone to
breakage when the internal implementation changes. As a result, the
structure of of an element’s Shadow DOM inadvertently becomes API surface
subject to breakage, diminishing the practical effectiveness of Shadow DOM
as an encapsulation primitive.
-
Although Shadow DOM’s style encapsulation *improves* the
predictability of style recalc performance since the side effects of a
style change are limited to a small subset of the document, using
/deep/ and::shadow re-opens the style invalidation area and reduces
Shadow DOM’s effectiveness as a performance primitive.
-
Using /deep/ and ::shadow leads to verbose and difficult to understand
selectors.
For the reasons above, the Polymer team is currently exploring other
options for theming that address the shortcomings above and provide a
possible path to obsolescence of /deep/ and ::shadow altogether.
On Thursday, 16 July 2015 14:15:58 UTC-7, Justin Fagnani wrote:
On Thu, Jul 16, 2015 at 1:57 PM, Kelly St. John ke...@qfin.net wrote:
On a somewhat related note, is there a reason the demos/docs are not in
place for paper-styles in the new 1.0 element catalog? (
https://elements.polymer-project.org/elements/paper-styles)
Should I be using paper-styles, or is it experimental?
It's not experimental. I'm not sure why the documentation isn't showing
up.
On Thursday, 16 July 2015 12:39:25 UTC-7, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4
to 1.0. In the 0.5 app I leveraged the core-style element throughout in
order to apply common styling amongst the various custom elements. I'm
not
a CSS expert by any means (a relative newbie actually), and could really
use an example of how to do the same using the new 1.0 styling paradigms.
I like the idea of using a document-level element (via an external html
file) to store application-level common styles. For instance, one would
presume I could then place something like this in that document level
external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in
the app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment.
This is as intended. The styles are scoped on purpose so that they don't
leak downward. It's totally possible that in some component you're using
that .center is supposed to have a slightly different styling (especially
considering how many ways there are to center), and you wouldn't want to
override it.
The correct approach is to apply the properties where you need them. In
the host of that div, use @apply:
.my-class {
@apply(--layout-center);
}
div class=my-class/div
If you want to pass styles down the tree, and through scope boundaries,
then you can use CSS custom properties, but it's always up to the element
in a scope to choose to apply the property. In that way it's opt-in from
the element's point of view.
Does that help?
Cheers,
Justin
I'm likely missing something with the scoping of CSS styles in Polymer
1.0, or maybe even barking down the wrong path entirely. I want to employ
a theming strategy that will continue working as Polymer evolves beyond
1.0. I do not want to rewrite this application anytime soon...or it will
likely be necessary for me to look for other employment. Can someone
kindly point me in the right direction,
[polymer-dev] ขอเรียนเชิญเข้ารับการฝึกอบรมสัมมนา หลักสูตร การสัมภาษณ์งานและรับคนเข้าสู่องค์กร
*[image: 2] * *ผู้เข้าอบรมสัมมนาในเดือน กรกฎาคม รับฟรีหนังสือ HR Shared Service /การบริหารงานที่รวบรวมเอาระบบการบริหารทรัพยากรมนุษย์ * *หลักสูตร **“เทคนิค การสัมภาษณ์ งาน**และรับคนเข้าสู่องค์กร* *วันที่ 20 กรกฎาคม 2558* *อัตราค่าสัมมนา/ ผู้สนใจทั่วไป 3,500 บาท สมาชิก 3,395 บาท * *วิทยากร ดร.กฤติน กุลเพ็ง * *หัวข้อการสัมมนา* 1.ภาพรวมของการสรรหาและคัดเลือกบุคลากร(Overview of Recruitment and Selection) 2.หลักการและแนวทางของการสัมภาษณ์งานอย่างมีประสิทธิภาพ (Principles of Recruitment And Selection) 3.การวางแผนการสัมภาษณ์ร่วมเป็นคณะกรรมการสัมภาษณ์ บทบาทที่พึงปฏิบัติ (How to plan a Performance interviewing Planning) 4.กระบวนการขั้นตอนของการสัมภาษณ์งาน (Interview Process) 5.รูปแบบในการสัมภาษณ์งาน /เทคนิคการสัมภาษณ์ที่สามารถนำมาใช้ให้เกิดประโยชน์ (Different Types of Interview) 6.การใช้ประโยชน์จากข้อมูลประวัติในใบสมัครงาน Utilizing the candidate resume หรือใช้ Biodata มาเป็นเครื่องมือทำนายในอนาคต 7.หลักการของ STAR Model : Situation (Task)-Action-Result 8.เทคนิคในการสัมภาษณ์งานอย่างมีประสิทธิภาพ (Types of Interview Technique) 8.1ประเภทของการสัมภาษณ์งาน (Types of Interviewing) 8.2การเตรียมความพร้อมก่อนการสัมภาษณ์งาน(Preparing for Interview ) 8.3ชนิดของคำถามในการสัมภาษณ์ (Types of Question) 9.ฝึกปฏิบัติการตั้งคำถาม Workshop และเทคนิคการสัมภาษณ์ จากผู้สมัครงานจริง พร้อมทั้งแบบการประเมินตาม core competency ขององค์กร 10.สรุปปัจจัยที่มีผลต่อการสัมภาษณ์งาน(Factor Affecting Interview)/ปัญหาและอุปสรรคที่เกิดขึ้น และแนวทางแก้ไข ดูรายละเอียดทั้งหมด *หลักสูตร “เทคนิคการสัมภาษณ์งาน และรับคนเข้าสู่องค์กร” http://www.krittin.in.th/%E0%B8%9D%E0%B8%B6%E0%B8%81%E0%B8%AD%E0%B8%9A%E0%B8%A3%E0%B8%A1hr/79-link/256-%E0%B9%80%E0%B8%97%E0%B8%84%E0%B8%99%E0%B8%B4%E0%B8%84%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%B1%E0%B8%A1%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%93%E0%B9%8C%E0%B8%87%E0%B8%B2%E0%B8%99-%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%84%E0%B8%99%E0%B9%80%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B8%AA%E0%B8%B9%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B8%84%E0%B9%8C%E0%B8%81%E0%B8%A3.html* สนใจสอบถามรายละเอียดเพิ่มเติมได้ที่เบอร์ 095-9151876,092-2633989 *หลักสูตร**“**ความรอบรู้**ในการ **บริหารทรัพยากรมนุษย์ **สำหรับ** HR* *”* *วันที่ 25 กรกฏาคม 2558* *อัตราค่าสัมมนา/ ผู้สนใจทั่วไป 3,800 บาท สมาชิก 3,686 บาท * *วิทยากร ดร.กฤติน กุลเพ็ง * *หัวข้อสัมมนา* *1)ความรู้ความสามารถของบริหารทรัพยากรมนุษย์ *(Capability) งานที่รับผิดชอบของการบริหารคนโดยพื้นฐาน จะต้องมีความรู้ด้านงานการบริหารทรัพยากรมนุษย์ คือ การวางแผนอัตรกำลัง การสรรหาคัดเลือกพนักงาน การพัฒนาและฝึกอบรม การประเมินผลการปฏิบัติงาน การสร้างแรงจูงใจ การจัดสวัสดิการและการสร้างแรงงานสัมพันธ์ *2)การยอมรับจากหน่วยงานต่างๆ* (Acceptability)นอกจากเก่งงานและภาคทฤษฎีแล้ว HR จะต้องมีความรอบรู้ในเรื่องภาคปฏิบัติการ บริหารอารมณ์ของคนจะต้องเป็นผู้ประสานสิบทิศเพื่อก่อให้เกิดความสัมพันธ์ที่ดีมี การทำงานร่วมกันอย่างมีความสุขอีกด้วย 3)*การร่วมงานสังคมและงานพิธีกรรมต่างๆ * ส่วนประกอบของหัวข้อนี้จะเป็นส่วนเสริมให้เกิดการยอมรับในตัวบุคคลเพิ่มมากขึ้น เมื่อเกิดการยอมรับมากขึ้นจะส่งผลให้การทำงานนั้นง่ายขึ้นตามมาด้วยเช่นการเข้าร่วมงานบวชงานมงคลสมรสและงานศพเป็นต้นในฐานะบทบาทของ HR ย่อมหนีไม่ พ้นในการเป็นเจ้าภาพของงานหรือบางองค์กรผู้บริหารอาจจะมอบหมายให้เป็น ผู้ดำเนินการรายการเสียเองอีกด้วย *4)แทคติคการทำงานด้านการฝึกอบรมให้เกิดความประทับใจ* ในภาคทฤษฎีเราหาอ่านที่ไหนก็ได้แต่ในภาคปฏิบัติเราไม่สามารถเรียนรู้ได้จึงจำเป็นต้องมี ความรอบรู้เพิ่มเติมในด้านการต้อนรับวิทยากรมารยาทในการจัดรถรับส่งวิทยากรรวมทั้งการ เตรียมความพร้อมในการแจ้งพนักงานเข้าร่วมการสัมมนา *5) ความรู้เบื้องต้นด้านกฎหมายอาญา * ประเด็นสำคัญสำหรับความร้ทางกฎหมายจะมีส่วนทำให้เกิดการยอมรับในหมู่พนักงานและ หัวหน้าเพิ่มมากขึ้นถ้าเราเป็นผู้แก้ไขปัญหาให้พนักงานเกิดความสุขได้เช่นกรณีพนักงานขับรถชนคนข้ามถนนได้รับบาดเจ็บสาหัสเราในฐานะ HR จะต้องเป็นผู้ให้คำปรึกษาหาทางให้พนักงานสามารถเป็นที่พึ่งได้ *6) ความรอบรู้กฎหมายแพ่งและพาณิชย์ในฐานะ HR ที่ต้องควรทราบ *นั้นมีอะไรบ้าง พนักงานเสียชีวิตแต่ยังมีเงินได้จากบริษัทอยู่เราจะจ่ายให้กับใครเป็นต้น *7)ความรู้เกี่ยวกับกองทุนประกันสังคมกองทุนเงินทดแทนและกองทุนสำรองเลี้ยงชีพ * ส่วนประกอบของความรู้ดังกล่าวจะเป็นในส่วนของผลประโยชน์ของพนักงานถ้าเราได้ ใส่ใจศึกษาหาความรู้เพิ่มเติมจะทำให้เกิดเสน่ห์แก่ตัวเองพนักงานทุกคนก็อยากจะเข้ามาหาเพราะเป็นผู้ที่สามารถให้ความรู้เรื่องนี้ได้ ดูรายละเอียดทั้งหมด หลักสูตร ความรอบรู้ในการบริหารทรัพยากรมนุษย์ สำหรับ HR http://www.krittin.in.th/%E0%B8%9D%E0%B8%B6%E0%B8%81%E0%B8%AD%E0%B8%9A%E0%B8%A3%E0%B8%A1hr/79-link/207-%E0%B8%9A%E0%B8%A3%E0%B8%B4%E0%B8%AB%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%A3%E0%B8%B1%E0%B8%9E%E0%B8%A2%E0%B8%B2%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B8%99%E0%B8%B8%E0%B8%A9%E0%B8%A2%E0%B9%8C.html สนใจสอบถามรายละเอียดเพิ่มเติมได้ที่เบอร์ 095-9151876,092-2633989 *หลักสูตร“กลยุทธ์การบริหารค่าตอบแทนโครงสร้างค่าจ้าง เงินเดือน* *วันที่ 27 กรกฏาคม 2558* *อัตราค่าสัมมนา/ ผู้สนใจทั่วไป 3,800 บาท สมาชิก 3,686 บาท วิทยากร ดร.กฤติน กุลเพ็ง * *หัวข้อสัมมนา
[polymer-dev] Help with Polymer 1.0 CSS Styling
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4 to
1.0. In the 0.5 app I leveraged the core-style element throughout in order
to apply common styling amongst the various custom elements. I'm not a CSS
expert by any means (a relative newbie actually), and could really use an
example of how to do the same using the new 1.0 styling paradigms. I like
the idea of using a document-level element (via an external html file) to
store application-level common styles. For instance, one would presume I
could then place something like this in that document level external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in the
app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment. I'm
likely missing something with the scoping of CSS styles in Polymer 1.0, or
maybe even barking down the wrong path entirely. I want to employ a
theming strategy that will continue working as Polymer evolves beyond 1.0.
I do not want to rewrite this application anytime soon...or it will likely
be necessary for me to look for other employment. Can someone kindly point
me in the right direction, please?
Thanks
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/a9f5874f-f886-4671-ae5b-1dfdd28b3345%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: Help with Polymer 1.0 CSS Styling
On a somewhat related note, is there a reason the demos/docs are not in
place for paper-styles in the new 1.0 element catalog?
(https://elements.polymer-project.org/elements/paper-styles)
Should I be using paper-styles, or is it experimental?
On Thursday, 16 July 2015 12:39:25 UTC-7, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4 to
1.0. In the 0.5 app I leveraged the core-style element throughout in order
to apply common styling amongst the various custom elements. I'm not a CSS
expert by any means (a relative newbie actually), and could really use an
example of how to do the same using the new 1.0 styling paradigms. I like
the idea of using a document-level element (via an external html file) to
store application-level common styles. For instance, one would presume I
could then place something like this in that document level external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in the
app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment. I'm
likely missing something with the scoping of CSS styles in Polymer 1.0, or
maybe even barking down the wrong path entirely. I want to employ a
theming strategy that will continue working as Polymer evolves beyond 1.0.
I do not want to rewrite this application anytime soon...or it will likely
be necessary for me to look for other employment. Can someone kindly point
me in the right direction, please?
Thanks
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/3759a8f4-2da7-4fca-b51a-77f57d2d8d8f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
On Thu, Jul 16, 2015 at 1:57 PM, Kelly St. John ke...@qfin.net wrote:
On a somewhat related note, is there a reason the demos/docs are not in
place for paper-styles in the new 1.0 element catalog? (
https://elements.polymer-project.org/elements/paper-styles)
Should I be using paper-styles, or is it experimental?
It's not experimental. I'm not sure why the documentation isn't showing up.
On Thursday, 16 July 2015 12:39:25 UTC-7, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4 to
1.0. In the 0.5 app I leveraged the core-style element throughout in order
to apply common styling amongst the various custom elements. I'm not a CSS
expert by any means (a relative newbie actually), and could really use an
example of how to do the same using the new 1.0 styling paradigms. I like
the idea of using a document-level element (via an external html file) to
store application-level common styles. For instance, one would presume I
could then place something like this in that document level external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in
the app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment.
This is as intended. The styles are scoped on purpose so that they don't
leak downward. It's totally possible that in some component you're using
that .center is supposed to have a slightly different styling (especially
considering how many ways there are to center), and you wouldn't want to
override it.
The correct approach is to apply the properties where you need them. In the
host of that div, use @apply:
.my-class {
@apply(--layout-center);
}
div class=my-class/div
If you want to pass styles down the tree, and through scope boundaries,
then you can use CSS custom properties, but it's always up to the element
in a scope to choose to apply the property. In that way it's opt-in from
the element's point of view.
Does that help?
Cheers,
Justin
I'm likely missing something with the scoping of CSS styles in Polymer
1.0, or maybe even barking down the wrong path entirely. I want to employ
a theming strategy that will continue working as Polymer evolves beyond
1.0. I do not want to rewrite this application anytime soon...or it will
likely be necessary for me to look for other employment. Can someone
kindly point me in the right direction, please?
Thanks
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/3759a8f4-2da7-4fca-b51a-77f57d2d8d8f%40googlegroups.com
https://groups.google.com/d/msgid/polymer-dev/3759a8f4-2da7-4fca-b51a-77f57d2d8d8f%40googlegroups.com?utm_medium=emailutm_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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAEKsHmDK-shKBHJ%2BnX6g2JqUBJW9p9-cSC0fee0KthyWvvs2rw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: Help with Polymer 1.0 CSS Styling
*ps:* Of course, I meant to say that I would be able to use these document
level styles by applying classes to any tag *in the Local DOM of any custom
element* in the app.
On Thursday, 16 July 2015 12:39:25 UTC-7, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4 to
1.0. In the 0.5 app I leveraged the core-style element throughout in order
to apply common styling amongst the various custom elements. I'm not a CSS
expert by any means (a relative newbie actually), and could really use an
example of how to do the same using the new 1.0 styling paradigms. I like
the idea of using a document-level element (via an external html file) to
store application-level common styles. For instance, one would presume I
could then place something like this in that document level external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in the
app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment. I'm
likely missing something with the scoping of CSS styles in Polymer 1.0, or
maybe even barking down the wrong path entirely. I want to employ a
theming strategy that will continue working as Polymer evolves beyond 1.0.
I do not want to rewrite this application anytime soon...or it will likely
be necessary for me to look for other employment. Can someone kindly point
me in the right direction, please?
Thanks
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/f3d8b0d9-1eab-4e1c-b36a-3558fec6b393%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] When do I have to call flush() in wct?
It would be really nice if anyone could provide a more detailed answer to this and similar questions: It's not clear what operations are supposed to be synchronous or asynchronous (and when async operations are at task level vs. microtask level), which affects tests but also some more complicated UI logic. I started a thread last week which didn't get any responses. I would appreciate even a simple we make no guarantees response if that's the case, because it would help knowing how defensive our code should be. Michael On Thu, Jul 16, 2015 at 4:02 PM, 'Daniel Freedman' via Polymer polymer-dev@googlegroups.com wrote: Generally you can get away with not using flush. You may still need flush for testing element lifecycle callbacks in polyfilled browsers, or measuring DOM, but I expect very few cornercases like that. On Thu, Jul 16, 2015 at 10:46 AM, aro...@flux.io wrote: With Polymer 1.0, observers are now evaluated synchronously. If I have an element whose behavior is driven by observers on attributes, and everything appears to work in synchronous tests, is there any reason to call flush()? That is, is it necessary that I call it before/after each test? 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 polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/adc4db0a-459d-4abf-ab8f-6453dae62213%40googlegroups.com https://groups.google.com/d/msgid/polymer-dev/adc4db0a-459d-4abf-ab8f-6453dae62213%40googlegroups.com?utm_medium=emailutm_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 polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAUAVAhtWUNOMEw8Zm2Nq5JVA0Q4ihDEtgPJ4pDjRVqZHk1ENA%40mail.gmail.com https://groups.google.com/d/msgid/polymer-dev/CAAUAVAhtWUNOMEw8Zm2Nq5JVA0Q4ihDEtgPJ4pDjRVqZHk1ENA%40mail.gmail.com?utm_medium=emailutm_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 polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACi5S_1DeF4B%2BkgPzwpW8rt%3DH1dw%2B2%3D1C_BbGqgdzuD5ZtPpQw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Polymer 1.0 postMessage
Did you try just this.$.theThing.postMessage()? Since that node is local to
your element's DOM, you shouldn't need the Polymer.dom() wrappers. Those
are mainly for cases where you're manipulating the light DOM of an element
and doing
things that could affect distribution.
On Fri, Jul 17, 2015 at 10:28 AM eric sherouse sherou...@gmail.com wrote:
Hello,
I am migrating my app from Polymer 0.5 to 1.0. I have an element with an
embed tag in it (used to communicate with a Native Client module actually).
embed id=theThing src={{nmf}} type=application/x-pnacl
on-load=loaded on-message=receive
In 0.5, I was able to use postMessage to communicate with this embed
element like this:
this.$.theThing.postMessage()
In 1.0, it appears I can no longer access the postMessage method (it is
undefined). I have tried multiple element selector variations:
Polymer.dom(this.$.theThing).postMessage(); //does not work
this.$$(#theThing).postMessage(); //does not work
Polymer.dom(this.root).querySelector(#theThing).postMessage(); //does
not work
Is there a new way to access these sorts of methods? If this is described
in the docs, I have missed it so far. Any thoughts would be appreciated.
Thanks,
Eric
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/a4acb0ab-765c-49f6-823c-66d1e1c76d3b%40googlegroups.com
https://groups.google.com/d/msgid/polymer-dev/a4acb0ab-765c-49f6-823c-66d1e1c76d3b%40googlegroups.com?utm_medium=emailutm_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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CACGqRCA7ENkSGmYZ2THyiCtn%2B8_X5VNWsj1KeEf9GsDgyJQhjg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: Help with Polymer 1.0 CSS Styling
I noticed the following comment in an earlier post to this group:
Yes, the plan is to migrate all use of /deep/ and ::shadow in Polymer
elements to custom properties, as it has been removed from the spec and as
noted Chrome has posted deprecation warnings. The vast majority of that
migration was already done during the 1.0 port and anything remaining
should be vestigial at this point and should be cleaned up soon. I opened
an issue for paper-slider; feel free to open issue on any other stragglers
you find (a quick search didn't find any).
It is unlikely that Chrome will actually remove support for these
combinators in the immediate future and the Shady DOM styling shim does
support it for now so there is no immediate risk of breakage; however our
team rule is to not rely on them going forward, and users obviously
shouldn't either.
I'm thinking using the iron-flex-layout classes (rather than applying
layout styles from CSS vars) will continue to work okay even without /deep/
and ::shadow support, as long as you explicitly import the HTML file in
each element that uses them. I'd be interested in any advice on this from
the Polymer team, though.
On Thursday, July 16, 2015 at 5:16:37 PM UTC-6, Nathan Hadfield wrote:
Kelly, *iron-flex-layout/classes/iron-flex-layout.html* (notice the
*/classes/* folder, as opposed to *ion-flex-layout/iron-flex-layout.html*)
provides stylesheet that includes selectors that use */deep/* in order to
reach through to the Shadow DOM. See the documentation in migration.md
https://github.com/Polymer/docs/blob/master/1.0/docs/migration.md#layout-attributes-replaced-by-layout-classes-and-custom-properties-layout-attributes
at
Polymer/docs.
IIRC the Polymer team prefers using CSS vars over classes for layout --
I'm guessing so that they don't have to make changes when /deep/ is no
longer supported, and as Justin pointed out, so that they don't bleed
unintentionally.
There is a *:root* selector that you can use to style everything in the
shadow root. (See
https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style.)
I believe you could use it to make your example work:
:root .center {
@apply(--layout-center);
}
In general, though, my understanding is that best practice is to use CSS
vars to theme your elements, as it helps to make explicit what
customization options your components support. In our project, we're
borrowing from the way paper-styles is implemented by defining a
styles.html file that each of our elements import. It defines CSS vars for
our colors, font styles, etc.
Nathan
On Thursday, July 16, 2015 at 1:39:25 PM UTC-6, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4 to
1.0. In the 0.5 app I leveraged the core-style element throughout in order
to apply common styling amongst the various custom elements. I'm not a CSS
expert by any means (a relative newbie actually), and could really use an
example of how to do the same using the new 1.0 styling paradigms. I like
the idea of using a document-level element (via an external html file) to
store application-level common styles. For instance, one would presume I
could then place something like this in that document level external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in
the app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment. I'm
likely missing something with the scoping of CSS styles in Polymer 1.0, or
maybe even barking down the wrong path entirely. I want to employ a
theming strategy that will continue working as Polymer evolves beyond 1.0.
I do not want to rewrite this application anytime soon...or it will likely
be necessary for me to look for other employment. Can someone kindly point
me in the right direction, please?
Thanks
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/95f3a0ed-165f-4e79-bbd6-713f42371e0e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
Thanks Justin. I just read more of the Styling documentation from the
Styling section of the 1.0 Developer Guide. Here is an important extract
pertaining to my issue (see below). It seems application-wide 'theming'
capability is a bit of a casualty stemmed from the necessary removal of
/deep/ and ::shadow selectors used previously in polymer 0.5. As you
eluded to above, it seems I'll have to look into how to incorporate the use
of Custom CSS properties in order to apply 'theming' across elements.
One solution the Shadow DOM spec authors provided to address the theming
problem are the /deep/ and::shadow combinators, which allow writing rules
that pierce through the Shadow DOM encapsulation boundary. Although Polymer
0.5 promoted this mechanism for theming, it was ultimately unsatisfying for
several reasons:
-
Using /deep/ and ::shadow for theming leaks details of an otherwise
encapsulated element to the user, leading to brittle selectors piercing
into the internal details of an element’s Shadow DOM that are prone to
breakage when the internal implementation changes. As a result, the
structure of of an element’s Shadow DOM inadvertently becomes API surface
subject to breakage, diminishing the practical effectiveness of Shadow DOM
as an encapsulation primitive.
-
Although Shadow DOM’s style encapsulation *improves* the predictability
of style recalc performance since the side effects of a style change are
limited to a small subset of the document, using /deep/ and::shadow re-opens
the style invalidation area and reduces Shadow DOM’s effectiveness as a
performance primitive.
-
Using /deep/ and ::shadow leads to verbose and difficult to understand
selectors.
For the reasons above, the Polymer team is currently exploring other
options for theming that address the shortcomings above and provide a
possible path to obsolescence of /deep/ and ::shadow altogether.
On Thursday, 16 July 2015 14:15:58 UTC-7, Justin Fagnani wrote:
On Thu, Jul 16, 2015 at 1:57 PM, Kelly St. John ke...@qfin.net
javascript: wrote:
On a somewhat related note, is there a reason the demos/docs are not in
place for paper-styles in the new 1.0 element catalog? (
https://elements.polymer-project.org/elements/paper-styles)
Should I be using paper-styles, or is it experimental?
It's not experimental. I'm not sure why the documentation isn't showing up.
On Thursday, 16 July 2015 12:39:25 UTC-7, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4 to
1.0. In the 0.5 app I leveraged the core-style element throughout in order
to apply common styling amongst the various custom elements. I'm not a CSS
expert by any means (a relative newbie actually), and could really use an
example of how to do the same using the new 1.0 styling paradigms. I like
the idea of using a document-level element (via an external html file) to
store application-level common styles. For instance, one would presume I
could then place something like this in that document level external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in
the app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment.
This is as intended. The styles are scoped on purpose so that they don't
leak downward. It's totally possible that in some component you're using
that .center is supposed to have a slightly different styling (especially
considering how many ways there are to center), and you wouldn't want to
override it.
The correct approach is to apply the properties where you need them. In
the host of that div, use @apply:
.my-class {
@apply(--layout-center);
}
div class=my-class/div
If you want to pass styles down the tree, and through scope boundaries,
then you can use CSS custom properties, but it's always up to the element
in a scope to choose to apply the property. In that way it's opt-in from
the element's point of view.
Does that help?
Cheers,
Justin
I'm likely missing something with the scoping of CSS styles in Polymer
1.0, or maybe even barking down the wrong path entirely. I want to employ
a theming strategy that will continue working as Polymer evolves beyond
1.0. I do not want to rewrite this application anytime soon...or it will
likely be necessary for me to look for other employment. Can someone
kindly point me in the right direction, please?
Thanks
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,
[polymer-dev] Re: iron-media-query events
That event has been renamed to *`on-query-matches-changed`*
e.g.
* iron-media-query*
*on-query-matches-changed=_onQueryMatchesChanged*
*query=media query*
*/iron-media-query*
On Monday, July 13, 2015 at 11:44:27 PM UTC-7, toduu wrote:
Anybody know why Iron-media-query does not have an event like
core-media-change in core-media-query. Also I was not able to understand /
use the new methods listed queryChanged and queyHandler. Any suggestions.
I have resorted to javascript window.addEventListener('resize', function()
{ -- to kick off layout change from horizontal to vertical.
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/7da7c9ce-9c4a-4638-b609-f79921ed455f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: Help with Polymer 1.0 CSS Styling
Kelly, *iron-flex-layout/classes/iron-flex-layout.html* (notice the
*/classes/* folder, as opposed to *ion-flex-layout/iron-flex-layout.html*)
provides stylesheet that includes selectors that use */deep/* in order to
reach through to the Shadow DOM. See the documentation in migration.md
https://github.com/Polymer/docs/blob/master/1.0/docs/migration.md#layout-attributes-replaced-by-layout-classes-and-custom-properties-layout-attributes
at
Polymer/docs.
IIRC the Polymer team prefers using CSS vars over classes for layout -- I'm
guessing so that they don't have to make changes when /deep/ is no longer
supported, and as Justin pointed out, so that they don't bleed
unintentionally.
There is a *:root* selector that you can use to style everything in the
shadow root. (See
https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style.)
I believe you could use it to make your example work:
:root .center {
@apply(--layout-center);
}
In general, though, my understanding is that best practice is to use CSS
vars to theme your elements, as it helps to make explicit what
customization options your components support. In our project, we're
borrowing from the way paper-styles is implemented by defining a
styles.html file that each of our elements import. It defines CSS vars for
our colors, font styles, etc.
Nathan
On Thursday, July 16, 2015 at 1:39:25 PM UTC-6, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4 to
1.0. In the 0.5 app I leveraged the core-style element throughout in order
to apply common styling amongst the various custom elements. I'm not a CSS
expert by any means (a relative newbie actually), and could really use an
example of how to do the same using the new 1.0 styling paradigms. I like
the idea of using a document-level element (via an external html file) to
store application-level common styles. For instance, one would presume I
could then place something like this in that document level external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in the
app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment. I'm
likely missing something with the scoping of CSS styles in Polymer 1.0, or
maybe even barking down the wrong path entirely. I want to employ a
theming strategy that will continue working as Polymer evolves beyond 1.0.
I do not want to rewrite this application anytime soon...or it will likely
be necessary for me to look for other employment. Can someone kindly point
me in the right direction, please?
Thanks
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/383d2fdc-5a94-43d6-966e-858bbb05a88b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Paper-drowpdown-menu
I've been searching for a paper dropdown menu but the polymer elements site https://elements.polymer-project.org/browse?package=paper-elements doesn't seem to have one listed... unless you guess the correct url: https://www.polymer-project.org/1.0/components/paper-dropdown-menu/demo.html Is this omission an intentional (e.g. it's not ready yet) or a mistake? In other words: can I use it or should I wait 'till later? 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 polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACsT%3DoEczjbWbW5og90WmcELw%3DY0tC5bJcW6rbVMsH2cJDEo%3DA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
CSS custom properties are the way to do theming. Polymer includes support,
and the paper elements use them extensively.
On Thu, Jul 16, 2015 at 3:30 PM, Kelly St. John ke...@qfin.net wrote:
That said...it appears that the use of CSS custom properties may not be
wise based on current browser support for that feature. Is that the case?
On Thursday, 16 July 2015 15:21:33 UTC-7, Kelly St. John wrote:
Thanks Justin. I just read more of the Styling documentation from the
Styling section of the 1.0 Developer Guide. Here is an important extract
pertaining to my issue (see below). It seems application-wide 'theming'
capability is a bit of a casualty stemmed from the necessary removal of
/deep/ and ::shadow selectors used previously in polymer 0.5. As you
eluded to above, it seems I'll have to look into how to incorporate the use
of Custom CSS properties in order to apply 'theming' across elements.
One solution the Shadow DOM spec authors provided to address the theming
problem are the /deep/ and::shadow combinators, which allow writing
rules that pierce through the Shadow DOM encapsulation boundary. Although
Polymer 0.5 promoted this mechanism for theming, it was ultimately
unsatisfying for several reasons:
-
Using /deep/ and ::shadow for theming leaks details of an otherwise
encapsulated element to the user, leading to brittle selectors piercing
into the internal details of an element’s Shadow DOM that are prone to
breakage when the internal implementation changes. As a result, the
structure of of an element’s Shadow DOM inadvertently becomes API surface
subject to breakage, diminishing the practical effectiveness of Shadow DOM
as an encapsulation primitive.
-
Although Shadow DOM’s style encapsulation *improves* the
predictability of style recalc performance since the side effects of a
style change are limited to a small subset of the document, using
/deep/ and::shadow re-opens the style invalidation area and reduces
Shadow DOM’s effectiveness as a performance primitive.
-
Using /deep/ and ::shadow leads to verbose and difficult to
understand selectors.
For the reasons above, the Polymer team is currently exploring other
options for theming that address the shortcomings above and provide a
possible path to obsolescence of /deep/ and ::shadow altogether.
On Thursday, 16 July 2015 14:15:58 UTC-7, Justin Fagnani wrote:
On Thu, Jul 16, 2015 at 1:57 PM, Kelly St. John ke...@qfin.net wrote:
On a somewhat related note, is there a reason the demos/docs are not in
place for paper-styles in the new 1.0 element catalog? (
https://elements.polymer-project.org/elements/paper-styles)
Should I be using paper-styles, or is it experimental?
It's not experimental. I'm not sure why the documentation isn't showing
up.
On Thursday, 16 July 2015 12:39:25 UTC-7, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4
to 1.0. In the 0.5 app I leveraged the core-style element throughout in
order to apply common styling amongst the various custom elements. I'm
not
a CSS expert by any means (a relative newbie actually), and could really
use an example of how to do the same using the new 1.0 styling paradigms.
I like the idea of using a document-level element (via an external html
file) to store application-level common styles. For instance, one would
presume I could then place something like this in that document level
external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in
the app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment.
This is as intended. The styles are scoped on purpose so that they don't
leak downward. It's totally possible that in some component you're using
that .center is supposed to have a slightly different styling (especially
considering how many ways there are to center), and you wouldn't want to
override it.
The correct approach is to apply the properties where you need them. In
the host of that div, use @apply:
.my-class {
@apply(--layout-center);
}
div class=my-class/div
If you want to pass styles down the tree, and through scope boundaries,
then you can use CSS custom properties, but it's always up to the element
in a scope to choose to apply the property. In that way it's opt-in from
the element's point of view.
Does that help?
Cheers,
Justin
I'm likely missing something with the scoping of CSS styles in Polymer
1.0, or maybe even barking down the wrong path entirely. I want to employ
a theming strategy that will continue working as Polymer evolves beyond
1.0. I do not want to rewrite this application anytime soon...or it
Re: [polymer-dev] When do I have to call flush() in wct?
Generally you can get away with not using flush. You may still need flush for testing element lifecycle callbacks in polyfilled browsers, or measuring DOM, but I expect very few cornercases like that. On Thu, Jul 16, 2015 at 10:46 AM, aro...@flux.io wrote: With Polymer 1.0, observers are now evaluated synchronously. If I have an element whose behavior is driven by observers on attributes, and everything appears to work in synchronous tests, is there any reason to call flush()? That is, is it necessary that I call it before/after each test? 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 polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/adc4db0a-459d-4abf-ab8f-6453dae62213%40googlegroups.com https://groups.google.com/d/msgid/polymer-dev/adc4db0a-459d-4abf-ab8f-6453dae62213%40googlegroups.com?utm_medium=emailutm_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 polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAUAVAhtWUNOMEw8Zm2Nq5JVA0Q4ihDEtgPJ4pDjRVqZHk1ENA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
Does the polyfill support css variables in a standards-compliant fashion? I
personally got burned on /deep/ getting deprecated, and it kind of looks
like css variables aren't settled yet:
http://caniuse.com/#feat=css-variables
http://www.w3.org/TR/css-variables/
e
On Thu, Jul 16, 2015 at 4:16 PM Nathan Hadfield hadfie...@gmail.com wrote:
Kelly, *iron-flex-layout/classes/iron-flex-layout.html* (notice the
*/classes/* folder, as opposed to *ion-flex-layout/iron-flex-layout.html*)
provides stylesheet that includes selectors that use */deep/* in order to
reach through to the Shadow DOM. See the documentation in migration.md
https://github.com/Polymer/docs/blob/master/1.0/docs/migration.md#layout-attributes-replaced-by-layout-classes-and-custom-properties-layout-attributes
at
Polymer/docs.
IIRC the Polymer team prefers using CSS vars over classes for layout --
I'm guessing so that they don't have to make changes when /deep/ is no
longer supported, and as Justin pointed out, so that they don't bleed
unintentionally.
There is a *:root* selector that you can use to style everything in the
shadow root. (See
https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style.)
I believe you could use it to make your example work:
:root .center {
@apply(--layout-center);
}
In general, though, my understanding is that best practice is to use CSS
vars to theme your elements, as it helps to make explicit what
customization options your components support. In our project, we're
borrowing from the way paper-styles is implemented by defining a
styles.html file that each of our elements import. It defines CSS vars for
our colors, font styles, etc.
Nathan
On Thursday, July 16, 2015 at 1:39:25 PM UTC-6, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4 to
1.0. In the 0.5 app I leveraged the core-style element throughout in order
to apply common styling amongst the various custom elements. I'm not a CSS
expert by any means (a relative newbie actually), and could really use an
example of how to do the same using the new 1.0 styling paradigms. I like
the idea of using a document-level element (via an external html file) to
store application-level common styles. For instance, one would presume I
could then place something like this in that document level external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in
the app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment. I'm
likely missing something with the scoping of CSS styles in Polymer 1.0, or
maybe even barking down the wrong path entirely. I want to employ a
theming strategy that will continue working as Polymer evolves beyond 1.0.
I do not want to rewrite this application anytime soon...or it will likely
be necessary for me to look for other employment. Can someone kindly point
me in the right direction, please?
Thanks
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/383d2fdc-5a94-43d6-966e-858bbb05a88b%40googlegroups.com
https://groups.google.com/d/msgid/polymer-dev/383d2fdc-5a94-43d6-966e-858bbb05a88b%40googlegroups.com?utm_medium=emailutm_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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CABsi40J49DbyggZZiTcmg_FmXW1WfZ0zs6HRFJj5HiDK0KS%3D3g%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Re: Help with Polymer 1.0 CSS Styling
Eric, I think the var() implementation supported by the polyfill is pretty
much standard, but my understanding is the @apply() syntax is a Polymer
innovation --
see
https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins
On Thursday, July 16, 2015 at 5:19:06 PM UTC-6, Eric Eslinger wrote:
Does the polyfill support css variables in a standards-compliant fashion?
I personally got burned on /deep/ getting deprecated, and it kind of looks
like css variables aren't settled yet:
http://caniuse.com/#feat=css-variables
http://www.w3.org/TR/css-variables/
e
On Thu, Jul 16, 2015 at 4:16 PM Nathan Hadfield hadf...@gmail.com
javascript: wrote:
Kelly, *iron-flex-layout/classes/iron-flex-layout.html* (notice the
*/classes/* folder, as opposed to *ion-flex-layout/iron-flex-layout.html*)
provides stylesheet that includes selectors that use */deep/* in order
to reach through to the Shadow DOM. See the documentation in migration.md
https://github.com/Polymer/docs/blob/master/1.0/docs/migration.md#layout-attributes-replaced-by-layout-classes-and-custom-properties-layout-attributes
at
Polymer/docs.
IIRC the Polymer team prefers using CSS vars over classes for layout --
I'm guessing so that they don't have to make changes when /deep/ is no
longer supported, and as Justin pointed out, so that they don't bleed
unintentionally.
There is a *:root* selector that you can use to style everything in the
shadow root. (See
https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style.)
I believe you could use it to make your example work:
:root .center {
@apply(--layout-center);
}
In general, though, my understanding is that best practice is to use CSS
vars to theme your elements, as it helps to make explicit what
customization options your components support. In our project, we're
borrowing from the way paper-styles is implemented by defining a
styles.html file that each of our elements import. It defines CSS vars for
our colors, font styles, etc.
Nathan
On Thursday, July 16, 2015 at 1:39:25 PM UTC-6, Kelly St. John wrote:
Hi All,
I'm currently in the midst of migrating an app built on polymer 0.5.4 to
1.0. In the 0.5 app I leveraged the core-style element throughout in order
to apply common styling amongst the various custom elements. I'm not a CSS
expert by any means (a relative newbie actually), and could really use an
example of how to do the same using the new 1.0 styling paradigms. I like
the idea of using a document-level element (via an external html file) to
store application-level common styles. For instance, one would presume I
could then place something like this in that document level external file:
style is=custom-style
.center {
@apply(--layout-center);
}
.horizontal {
@apply(--layout-horizontal);
}
.vertical {
@apply(--layout-vertical);
}
/style
And use these document level styles by applying classes to any tag in
the app, like:
div class=horizontal center
However, that approach doesn't seem to be working at the moment. I'm
likely missing something with the scoping of CSS styles in Polymer 1.0, or
maybe even barking down the wrong path entirely. I want to employ a
theming strategy that will continue working as Polymer evolves beyond 1.0.
I do not want to rewrite this application anytime soon...or it will likely
be necessary for me to look for other employment. Can someone kindly point
me in the right direction, please?
Thanks
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 polymer-dev...@googlegroups.com javascript:.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/383d2fdc-5a94-43d6-966e-858bbb05a88b%40googlegroups.com
https://groups.google.com/d/msgid/polymer-dev/383d2fdc-5a94-43d6-966e-858bbb05a88b%40googlegroups.com?utm_medium=emailutm_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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/e7c531ee-9e88-4d08-9bfd-0f0ff11f9381%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: iron-media-query events
That event has been rename to *`on-query-matches-changed`*
e.g.
*iron-media-query*
*on-query-matches-changed=_onQueryMatchesChanged*
*query=media query*
*/iron-media-query*
On Monday, July 13, 2015 at 11:44:27 PM UTC-7, toduu wrote:
Anybody know why Iron-media-query does not have an event like
core-media-change in core-media-query. Also I was not able to understand /
use the new methods listed queryChanged and queyHandler. Any suggestions.
I have resorted to javascript window.addEventListener('resize', function()
{ -- to kick off layout change from horizontal to vertical.
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/63470505-ac97-4442-b654-c7f85be0ebef%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Polymer 1.0 postMessage
Hello,
I am migrating my app from Polymer 0.5 to 1.0. I have an element with an
embed tag in it (used to communicate with a Native Client module actually).
embed id=theThing src={{nmf}} type=application/x-pnacl
on-load=loaded on-message=receive
In 0.5, I was able to use postMessage to communicate with this embed
element like this:
this.$.theThing.postMessage()
In 1.0, it appears I can no longer access the postMessage method (it is
undefined). I have tried multiple element selector variations:
Polymer.dom(this.$.theThing).postMessage(); //does not work
this.$$(#theThing).postMessage(); //does not work
Polymer.dom(this.root).querySelector(#theThing).postMessage(); //does not
work
Is there a new way to access these sorts of methods? If this is described
in the docs, I have missed it so far. Any thoughts would be appreciated.
Thanks,
Eric
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/a4acb0ab-765c-49f6-823c-66d1e1c76d3b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Paper-drowpdown-menu
On 07/16/2015 05:24 PM, 'Brandon Tearse' via Polymer wrote: I've been searching for a paper dropdown menu but the polymer elements site https://elements.polymer-project.org/browse?package=paper-elements doesn't seem to have one listed... unless you guess the correct url: https://www.polymer-project.org/1.0/components/paper-dropdown-menu/demo.html Is this omission an intentional (e.g. it's not ready yet) or a mistake? In other words: can I use it or should I wait 'till later? Follow Polymer on Google+: plus.google.com/107187849809354688692 The paper-dropdown isn't ready yet for Polymer 1.0 (the one you linked is actually a Polymer 0.5 element). You can follow this issue to get notified when it will ship: https://github.com/PolymerElements/paper-elements/issues/17 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 polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/55A85A44.2080800%40gmail.com. For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Custom Element Using paper-dialog- better way to do this?
stackoverflow cross post
http://stackoverflow.com/questions/31466574/polymer-1-0-custom-element-using-paper-dialog-better-way-to-do-this
Polymer 1.0
I have a custom element `video-player` which uses `paper-dialog`.
They way it is now, seems kind of hacky. I have a external button(it has to
be a external button for my design) that opens it with:
bob = Polymer.dom(this.root).querySelector('video-player');
bob.querySelector('paper-dialog').open()
---
link rel=import href=
../bower_components/paper-dialog/paper-dialog.html
link rel=import href=
../bower_components/paper-icon-button/paper-icon-button.html
link rel=import href=../bower_components/iron-icons/iron-icons.html
link rel=import href=
../bower_components/google-youtube/google-youtube.html
link rel=import href=../bower_components/polymer/polymer.html
dom-module id=video-player
template
paper-dialog
div class=layout horizontal
paper-button dialog-dismiss
paper-icon-button icon=arrow-back/paper-icon-button
/paper-button
/div
div style=height: 100%; width: 100%
google-youtube style=height: 100%;
video-id=YMWd7QnXY8E
rel=1
start=5
playsinline=0
controls=2
showinfo=0
width=100%
height=100%
autoplay=1
/google-youtube
/div
/paper-dialog
/template
script
Polymer({
is: video-player
});
/script
/dom-module
/paper-dialog
I can not inherit the `paper-dialog` behavior(which would be `iron-overlay`
because it won't relate to that specific `paper-dialog` element.
Since this seems kind of hacky, is there a better way to do this?
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 polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/320ba2e4-c6c8-4dc6-b07f-cf76f224adc1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
