Theming Elements -- Polycasts #17 Google Developers Arabic English

Theming Elements -- Polycasts #17YouTube↗ IA↗(long shot)
Science & Technology 28.1K views 233 likes 2 dislikes 02 Jun 2015

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

[VIDEO GAME MUSIC]

مرحباً، ما الأخبار؟

أنا روب دودسون.

وأهلاً بكم إلى حلقة [I/o] خاصة من Polycast.

It's Rob Dodson. Welcome to a very special I/O edition of "Polycast."

اليوم، سنتحدث عن تنسيق العناصر وإعداد مظهرها،

Today, we're going to talk about styling and theming elements

وعن تطورهم الملحوظ

and how all that just got way better

في الإصدار الجديد من Polymer.

in the new release of Polymer.

أعتقد حقاً أنك ستستمتع بهذا،

I really think you're going to enjoy this,

لنلقِ نظرة.

so let's check it out.

سأبدأ بالحديث قليلاً عن Polymer 0.5،

So I'm going to start with a little story about Polymer 0.5,

وذلك لأن الكثيرين قد تعثروا بهذه المشكلة.

because this is an issue that tripped up a lot of folks.

في Polymer 0.5، إن كان لديك مكوّن يحوي القليل من التنسيقات الداخلية،

In Polymer 0.5, if you had a component that

فسيكون لديك بعض تنسيقات CSS الأكثر تخصيصاً في المستند،

had some internal styles and then you had some more specific CSS styles in the document,

وعندما تأخذ هذا المكوّن إلى مستعرض يستخدم polyfill،

when you took that component over to polyfilled browsers

مثل Safari ، أو Internet Explorer،

like Safari or Internet Explorer,

فستراه بمظهر ما ولكن في Chrome،

you might see one thing and then in Chrome,

حيث يوجد ظلّ DOM،

where there's native Shadow DOM, you

فسترى شيئاً مختلفاً.

would see something different.

بمعنى آخر، وجود CSS أكثر تخصيصاً في المستند،

In other words, if you had more specific CSS in the document,

قد يخرّب مكوّنك بالكامل.

it could totally wreck your component.

مما سبب الأخطاء للعديد من المبتدئين،

And this tripped up a lot of beginners who were just getting

الذين كانوا قد بدئوا حديثاً بتعلم Polymer،

started with Polymer and thought perhaps it just

وظنّوا أنه ربّما لا يعمل على كافة المتصفّحات،

didn't work in all browsers, which is not the case.

وهذه ليست المسألة. إنما من الصعب جداً أن يلائم polyfill

It's just it's very, very difficult to properly polyfill

دعني أعطيك مثالاً كيف سيبدو هذا،

So let me give you an example of what this looks like,

حتى تتمكن من فهم الفكرة.

just so you can kind of internalize it.

في واحدة من الحلقات السابقة من Polycast،

In one of the previous episodes of "Polycast,"

قمنا بإنشاء علامة تنبيه سريعة هنا،

we created this quick alert tag here,

والتي هي بشكل أساسي إشعار صغير

which is basically like a little notification

يمكنك إرساله إلى المستخدم.

you might send to a user.

وفي تلك الحلقة، أردت أن أنسّق div هنا في الأسفل،

And in that episode, I wanted to style this div down here,

لذا استخدمت تنسيق التنبيه هذا.

so I used this alert style.

ولكن تخيل مايلي، بدلاً من استعمال منتخب الصنف هنا،

But imagine if, instead of using a class selector here,

لو قمت بتنسيق عنصر div بنفسه.

if I just styled the div element by itself.

وهذا ممكن كلياً.

Now, this is totally fine.

وسينتج لنا هذا المثال ذاته.

This would give us that same example.

والمشكلة به أنه ليس مخصص جداً.

The problem is just that it's not very specific.

وما قد يحدث هو أن يكون صديقي

And so what could happen is my buddy

يعمل في مكان آخر في الموقع،

might be working somewhere else in the site,

غافلاً تماماً عما أقوم أنا بفعله.

totally oblivious to what I'm doing.

وقد ينشئ صنف تنبيه أيضاً،

And he might create an alert class, as well, just

ليستهدف بعض العناصر الأخرى في الصفحة.

to target some other element on the page.

ويمكنه تنسيقها ببعض الخطوط الغريبة

And he could style it with some weird fonts and background

وألوان الخلفيات ومالديك.

colors and what have you.

وعندما أتفقده في الصباح التالي؟

And then, when I go in the next morning,

أنظر إلى علامة التنبيه السريعة، أراها خرّبت كلياً.

I look at my quick alert tag, it's all busted.

بخط Comic Sans.

It's in Comic Sans.

تبدو بحالة مزرية.

It looks all messed up.

وكثيراً من الناس سيرون هذا،

And for a lot of folks, they saw this

وسيظنّون أن هذه الأشياء لاتعمل.

and they just thought, oh, this stuff just doesn't work.

ولكن المشكلة حقاً، أنك لاتستطيع تطبيق polyfill

But really, the problem is, you just can't very effectively

ضمن مجالات CSS.

polyfill CSS scoping.

وهذا أمرٌ شائك.

It's a pretty tricky thing to do.

ولكن الفريق قد فكّر بوجود بديل أفضل لما فعلناه تواً.

But the team decided perhaps there could be a better alternative to what we currently had.

يسعدني أن أعرّفك على علامة التنسيق المخصصة الجديدة.

And so I'm happy to introduce you to the new custom style

وهي نوع من امتداد لعنصر التنسيق.

tag. Now, this is a type extension of the style element.

إن كنت تتذكر في حلقة سابقة،

If you recall in a previous episode,

تحدثّنا عن كافة عناصر أنواع التمديد

we talked all about type extension elements

وكيفية عملها.

and how they work.

والأمر الرائع حيال علامة التنسيق المخصصة،

And the cool thing about the custom style tag

هي أنها تسمح لك بوضع مستند CSS داخلها

is it allows you to put your document CSS inside of it

وهذه التنسيقات لن تستطيع التأثير

and these styles are basically not going

أو العبث بأي من المكوّنات

to be able to affect or mess up any of the components

التي لديك على صفحتك في المستعرض الحاوي على polyfill.

that you have on your page in polyfilled browsers.

وهذه طريقة رائعة حقاً للحصول على تنسيق

It's a really great way to get lower bound style

أقل تقييداً ضمن مجال Polymer في الإصدار الجديد.

scoping in Polymer in the newest release.

أعتقد أنها رائعة حقاً.

I think it's pretty awesome.

أصبحت الآن تعرف كيفية حماية عناصرك

So now you know how to protect your elements

من تنسيقات مستوى المستند في المتصفحات الحاوية polyfill،

from document-level styles in polyfilled browsers,

الأمر التالي الذي أريد عرضه،

the next thing I want to show you

هو كيفية إعداد مظهرمجموعات عنصر كاملة

is how to actually theme whole element sets using

باستخدام بعض التقنيات الرائعة.

some cool new techniques.

في مدخلات ومخرجات السنة الماضية، عرضت بعض الطرق لإعداد مظهر العنصر

Now, in last year's I/O, I showed off a couple of ways that you could theme an element using

باستخدام بعض محددات اختراق الظل

some shadow piercing selectors.

إذاً، كان لدينا: عنصر الظل الزائف،

So there was ::shadow pseudo element,

والذي يسمح لك باختراق طبقة من حدود الظل،

which would allow you to pierce one level into the shadow

وفي هذا المثال، قام باستهداف عقدة slider

boundary and in this example, target the slider knob thing

بداخل ورقة slider.

inside of my paper slider.

كان هناك أيضاً الجامع العميق،

There was also the deep combinator,

والذي يسمح لك باختراق عدد غير محدود من طبقات حدود الظل.

which allows you to pierce infinite levels of shadow

في هذه الحالة، سأستهدف كافة مؤثرات الحبر بالداخل هنا،

boundaries. And in this case, I'm targeting all the little ink effects

عن طريق نقر رقم التعريف.

inside of here by actually hitting the ID.

ولكن هناك بعض المشاكل فيما يتعلق بالظل و/deep/.

But there are some problems with ::shadow and /deep/.

أولاً، يقومان بكسر التغليف تماماً.

First and foremost, they totally break encapsulation.

في هذه الأمثلة، كان عليّ معرفة اسم رقم التعريف المحدد لكل عنصر

In those examples, I had to know specific ID names of elements

داخل مكوّنات الويب خاصتي حتى أتمكن من استهدافه.

inside of my web components to target them,

مايعني، إن قام المؤلف بنقل هذه الأشياء، أو قام بتغيير الأسماء في أي مرحلة،

which means if the author moved those things around or changed

سيتعطل المظهر خاصتي.

the names at any point, my theme would break.

وأيضاً، يقوم الظل و/deep/. بتخريب بعض فوائد الأداء المحتملة.

Also, ::shadow and /deep/ kind of screw up some potential

هناك تلك الفكرة التي تفترض إمكانية تطوير إعادة حساب التنسيق باستخدام ظل DOM،

performance gains. There's this idea that you can improve style recalculation

إن لم يكن من الممكن اختراق هذه الظل.

using Shadow DOM, if it wasn't possible to pierce inside

ولكن هذه الفكرة غير موجودة حالياً.

of it. But that sort of goes out the window.

وأخيراً، وأعتقد أن هذا مهمٌ جداً،

And lastly, and I think this is pretty important,

يعتبر كلاً من الظل و/deep/ أدوات غير دقيقة.

both ::shadow and /deep/ are sort of imprecise tools.

يمكن تشبيههما بالمطرقة.

They're kind of like sledgehammers.

وهذا ذنب /deep/ بشكل رئيسي هنا،

In particular, /deep/ is kind of a main offender here,

بسبب قدرته على اختراق العديد من الطبقات والأشياء.

because it can pierce so many levels and do so many things.

لذا فكر الفريق بإمكانية وجود طريقة أفضل للتنسيق وإعداد المظهر

So the team thought that perhaps there would be a better way to do theming and styling

في الإصدار الجديد من Polymer.

in the new release of Polymer.

وهذه واحدة من الأشياء التي كنّا نحاول استكشافها هي متغيّرات CSS.

And one of the areas that we've been exploring is around CSS variables.

لذا دعني أريك مثالاً عن كيفية عمل هذا.

So let me show you an example of how this could work.

لديّ عنصر قمت بإنشائه هنا يدعى رسالة واجهة المستخدم،

I've got an element that I've created here called UI message

وهو وراثيّ.

and it is pretty generic.

يملك حاوية وثم ترويسة ومنطقة المحتوى بداخله.

It's got a container and then a header and content area

وله أيضاً بعض رابطي البيانات،

inside of it. And it's just got some data bindings to these properties

من أجل هذه الخصائص التي أنشأتها هنا في الأسفل.

down here that I've created.

الآن، سأقوم بإخفاء تعاريف JavaScript،

Now, I'm going to hide my JavaScript definition,

حتى أتمكن من التركيز على الرموز في الأعلى.

just so I can focus on the markup up here.

وأريد إضافة بعض التنسيقات.

And I want to add some styles.

لذا سأقوم باستهداف المضيف وأعطيه تنسيق inline block.

So I'm going to target the host and give it an inline block

سأستهدف هذه الحاوية، وسأجعل خلفيتها باللون الرمادي،

style. I'm also going to target that container and set its background color to gray and with a little bit

مع القليل من الحاشية.

وهذا سيعطيني رسالة واجهة مستخدم

And this is going to give me a very generic-looking sort of UI

ذات شكل وراثيّ جداً.

الآن، هذا ممل جداً ولكن لنقل أن أحداً ما أراد استخدام هذا في مشروعه.

Now, it's pretty boring, but let's say someone actually wanted to use this in their project.

وأول ما يريد فعله هو تغيير لون الترويسة.

And the first thing they wanted to do was change that header color.

للقيام هذا باستخدام متغيرات CSS،

So to do that using CSS variables,

يمكننا استهداف صنف الترويسة،

we can actually target the header class,

ومن ثم استهداف خاصية اللون، وإعطائها متغير هنا.

target the color property, and then give it a variable here.

لذا سأقول أن قيمة لون ترويسة رسالة واجهة المستخدم

So I'm saying that the value of UI message header color

ستضبط خاصية اللون.

should set my color property.

الآن، أعلم أن تركيب هذه الجملة غريب،

Now, I know that this syntax is pretty funky,

ولكنه التركيب القياسي لمتغيرات CSS3.

but this is the syntax-- this is the standard syntax for CSS3

والأمر الرائع حياله،

variables. And the cool thing about this is it

هو أنه يتيح للمؤلف عرض نقطة التنسيق للعالم الخارجي.

allows the author to expose a styling point to the outside world.

ولكن من يستخدم هذا المكوّن لايحتاج تماماً معرفة مكان استخدام المتغير.

But someone using this component doesn't actually need to know specifically where this variable is being used.

يكفيه معرفة وجود متغير للون الترويسة،

They just know that there's a header color variable

تم تطبيقه في مكانٍ ما.

somewhere that gets applied.

لذا سأنشئ مظهراً لهذا المكوّن.

So elsewhere, I'm creating a theme for this component.

لديّ عنصر التنسيق المخصص.

I've got a custom style element.

ومن المهم عند استخدام المتغيرات،

And it's very important that if you're using variables,

وضعهم داخل عناصر التنسيق المخصصة،

that you place them inside of custom style elements,

وذلك لأنها تعطي Polymer مكاناً واحداً

because it gives Polymer one place to look

للبحث عن تصريحات المتغيرات.

for these variable declarations.

سأستهدف علامة رسالة واجهة المستخدم،

I'm going to target the UI message tag,

وسأستهدف هذا المتغير،

I'm going to target that variable,

وسأمرر قيمة اللون الأبيض.

and I'll pass in a value of white.

وما سيفعله هذا هو إعطائي ترويسة باللون الأبيض.

And what that's going to do is give me a header that is white.

الآن، هذا رائع حقاً، لأنني وكمستهلك للعنصر،

Now, this is really cool, because as a consumer

لا يهمني معرفة أي شيء عما بداخله.

of the element, I don't need to know anything

يمكنني تحديد قيمة للمتغير،

about the internals. I can just set a value for that variable

وسيقوم المؤلف بعد ذلك باستخدامها كيفما يشاء.

and then the author can choose to use it however they wish.

لكن إليك الشرط.

But there's a catch here.

إن كان يجب علينا تعريف متغير لكل خاصية داخل العنصر،

If we have to define a variable for every single property

سينتهي الأمر بنا بآالاف المتغيرات ودون وقتٍ كافٍ،

inside of our element, then we're going to end up with thousands of variables and no time

بالتأكيد لانريد ذلك.

and we definitely don't want that.

وهنا حيث تصبح الأمور ممتعة.

So this is where things actually get kind of interesting.

قام فريق Polymer بالعمل على تجربة نظام إعداد مظهر جديد،

The Polymer team's been working on an experimental new theming

والذي يقوم بالاستفادة من الخصائص المخصصة CSS.

system that takes advantage of CSS custom properties.

كما قلت، مازال تحت التجربة، ولكنه رائع حقاً.

It's experimental, like I said, but totally awesome.

لذا أريد أن أريك كيفية عمله.

So I want to show you how that works.

الآن، واحدة من الأمور التي ستكون رائعة،

Now, one of the things that would be cool

إن استطعنا تمرير ليس متغير واحد فحسب في كل مرة،

is if we could pass in not just one variable at a time,

بل تمرير مجموعة من الخصائص كاملة،

but actually pass in a whole bunch of properties

في ذات الوقت.

هناك فكرة مشابهة لهذه في CSS preprocessors ،

There is a concept similar to this in CSS

كـ SaaS أو Less وتدعى mixins

preprocessors like SaaS or Less called mixins.

وهذا كان شيئاً يعمل به فريق Polymer،

And this is something that the Polymer team

مع معايير جسم CSS،

has been working with the CSS standards body

وذلك لإضافته للمواصفات الحالية.

to add to the current spec.

وتقوم الفكرة على أخد الخصائص المخصصة،

It's this idea of taking custom properties that

والتي تسمح لك بتمرير مجموعة قيم في نقس الوقت.

allow you to pass in whole bags of values all at once.

لذا دعني أريك كيفية عملها،

So let me show you how that works,

لأنها رائعة حقاً.

because it's pretty cool.

لنأخذ الترويسة هنا وبدلاً من هذا المتغير الوحيد هنا،

So let's take our header thing here and instead of just doing this one variable,

سأقوم بإنشاء البعض مما تسمى الخصائص المخصصة.

I'm going to create a few what are called custom properties.

لذا مازال لدي تنسيقات افتراضية نوعاً ما،

So I've still got my sort of default styles

والتي بدأت بها في الحاوية.

that I started with my container,

لكنني الآن سوف أستخدم هذه الصياغة،

but now I'm using this syntax to say,

لأخبره أنني أريد تطبيق خاصية مخصصة تدعى مظهر حاوية رسالة واجهة المستخدم.

hey, I want to apply a custom property called UI message

سأقوم بتطبيق مظهر ترويسة رسالة واجهة المستخدم ومظهر المحتوى.

container theme. I'm going to apply a UI message header theme and a content

ويمكنني هذا من العودة إلى ملف المظهر،

theme. And what this allows me to do is go back to my theme file

واستبدال هذا المتغير الوحيد بهذه الخصائص المخصصة.

and replace this one variable with those custom properties.

لاحظ وجود الفاصلة المنقوطة في النهاية.

Notice that there's a semicolon on the end here.

وهذا مهم لتركيب الجملة،

This is important for the syntax and something

وكنت لا أضعها في كثيرٍ من الأحيان.

that I often leave off.

ويمكنني الآن تمرير مجموعة كاملة من الخصائص،

And now, I can actually pass in just whole bags of properties

والتي أريد إلغاء التنسيقات الأساسية بها لهذا العنصر.

that I would like to override the default

الآن، قمت باستعارة هذه التنسيقات من مكتبة واجهة المستخدم

styles in that element. Now, I borrowed these styles from the Symantic UI Library

لأريك إمكانية فعل العديد من الأمور.

just to show that you can go hog wild here.

يمكنك تمرير ماتشاء من CSS .

You can pass in as much CSS as you could possibly imagine.

وماسيفعله هذا هو أخذ رسالة واجهة المستخدم المملة هذه بلون الفانيلا،

And what this is going to do is take our totally boring, vanilla UI message

وتحويلها لشيء أكثر إرضاءً.

and turn it into something that's actually much more pleasant.

بالعودة لمحرر النصوص البرمحية، أطلقت ملف Bower JSON،

So over in my Code Editor, I've got a Bower JSON file fired up

وصنفت في توابعي Polymer 0.9 RC.1

and I am in my dependencies listing Polymer 0.9 RC.1 as one

كواحدٍ منها.

of my dependencies.

الآن، مضت عدة أسابيع على تسجيل هذا،

Now, it's been a few weeks since this has been recorded,

لذا يمكنك بأمان في هذه المرحلة تبديل هذا بعلامة 0.9.0 الفعلية.

so you're probably safe at this point to just go ahead and replace this with the actual 0.9.0 tag.

وما أن تضع هذا في مكانه، يمكنك تأسيسه.

And once you've got that in place, you can install it.

سينصب أحدث نسخة من Polymer .

It'll pull down the latest version of Polymer.

وبداخل ملف رسالة واجهة المستخدم،

And over in my UI message file, this

هذا هو العنصر نفسه الذي عرضته في الشرائح.

is the same element that I was showing over in the slides.

وأول ماسأفعله أنني سأنشئ متغير ترويسة.

And the first thing I'm going to do is create a little header variable.

وسيسمح لي هذا بتغيير لون الترويسة هذه في الأسفل.

And that's just going to allow me to change the color of this header down here.

يمكنني إنشاء ملف My Theme HTML وإضافة عنصر تنسيق مخصص له.

I can create a My Theme HTML file and add a custom style element to that.

يمكنني إنشاء ملف Theme HTML وإضافة عنصر تنسيق مخصص له.

I can create a My Theme HTML file and add a custom style element to that.

وبداخل ها هنا، سأستهدف عنصر رسالة واجهة المستخدم،

And inside of here, I'm going to target the UI message element

وسأقوم بتمرير قيمة لهذا المتغير.

and I'll pass in a value for that variable.

وما أن أصبح مستعداً لاستخدامهم،

And now when I'm ready to use these guys,

يمكنني استيراد تعاريف رسالة واجهة المستخدم،

I can just import the definition for my UI message

واستيراد المظهر الذي أنشأته.

and import the theme that I just created.

ومن ثم يمكنني وضع علامة رسالة واجهة المستخدم في الصفحة،

And then, I can just drop the UI message tag on the page

وسيطبّق هذا المظهر عليها.

and that theme is going to be applied to it.

إن انتقلت إلى متصفّح Chrome، سنرى رسالتي،

So if I hop over to Chrome, we'll see my message

وسنرى تغيّر لون الترويسة.

and we see that updated header color.

الآن، لنحاول فعل ذلك باستخدام بعض الخصائص المخصصة.

Now, let's try to do this with some custom properties.

لذا سنعود إلى تعريف العنصر.

So we'll go back to our element definition.

وبدلاً من استعمال متغير واحد،

And instead of just the one variable,

سأستخدم التركيب @apply

I'm going to use the @ apply syntax

لأنشئ خصائص مخصصة من أجل مظهر الحاوية،

to create custom properties for container theme, header

مظهر الترويسة، ومظهر المحتوى.

theme, and content theme.

ومن ثم، بالعودة لملف My Theme HTML.

And then, back in My Theme HTML file,

يمكنني استبدال هذا المتغير الوحيد بهذه الخصائص المخصصة.

I can replace this one variable with those custom properties.

مرة أخرى، لاحظ الفواصل المنقوطة.

Again, note the semicolons here.

دائماً ما أنسى تضمينهم.

I always forget to include those.

ومن ثم سأقوم بلصق مجموعة من تنسيقات CSS.

And then, I'll just Paste in a bunch of CSS styles.

ومجدداً قمت باستعارة هذه التنسيقات من Symantec UI،

Again, these are the styles that I borrowed from Symantec UI,

ولاحظ إمكانية تمرير ما تريد،

but you can see that-- pass in whatever you want,

علبة الظل واللون والعتامة، وما تملك.

box shadow and color and opacity, what have you.

ستُطبّق هذه بكاملها،

All of these are going to be applied

وستقوم بإلغاء الإعدادات الافتراضية،

and they're going to override the defaults that

الموجودة داخل عنصر رسالة واجهة المستخدم.

are in that UI message element.

سنعود إلى متصفح Chrome وتقوم بتحديث الصفحة.

So you go back to Chrome and Refresh the page.

والآن، ستبدو الأشياء أكثر جمالاً.

And now, things are looking much nicer.

وهذا تطوّر هائل فيما يخص إعداد المظهر والتنسيق،

Now, this is a huge improvement over where we were with theming and styling in previous versions

عن الإصدارات السابقة لـPolymer.

شخصياً، أنا متحمس حقاً لرؤية ماستبنون به.

And personally, I'm just really excited to see

هذا كلّ مالديّ اليوم.

what you all build with it.

تأكد من ضغط زر الاشتراك.

That's it for today. Be sure to click little subscribe button.

ضع أسئلتك في التعليقات.

Leave me questions down in the comments.

كالعادة، شكراً للمشاهدة،

As always, thank you so much for watching

وسأراكم في المرة المقبلة.

and I'll see you next time. [VIDEO GAME MUSIC]

مرحباً، أنا روب.

Hey there, Polycasters, Rob here.

حان وقت الأسئلة، أرسل لي لوكاس سيروزي ثلاث أسئلة.

Q&A time-- a Lucas Ciruzzi sends in three questions.

والأول هو،

The first is, is the underscore notation

هل يتوجب وضع علامة الشرطة السفلية عند تعريف مراقب في كائن الخصائص؟

mandatory when you're defining an observer in your properties

سؤال جيد، لوكاس.

الشرطة السفلية ليست إلزامية .

It's a good question, Lucas. The underscore is actually not mandatory.

بل هي شيءٌ نضيفه للدلالة على خصوصية الوظيفة.

That's just something that we include

وأننا لانريد من العالم الخارجيّ استدعاء هذه الطريقة.

to signify that a function is private and that we don't want the outside world calling

ولكنها ليست مطلوبة.

بل هي بالأحرى عبارة عن نوع من التنسيق.

But by no means is it required. It's just sort of a stylistic thing.

السؤال الثاني، كيف تقوم بتنفيذ مستمع تغيير السمة في مكوّنات الويب الأساسية،

Second question-- how would you implement an attribute change listener on a native web component, so something that

لما لايستخدم Polymer ،

isn't using Polymer or anything like that, just

عنصر مخصص فانيليا؟

a vanilla custom element?

لفعل ذلك، يمكنك استخدام استدعاء تغيير السمة.

To do that, you can use the attribute change callback.

وهذا استدعاء دورة حياة يملكه كل عنصر مخصص.

That is a lifecycle callback that every custom element has.

وسيعطيك هذا الاستدعاء ثلاث ملخصات،

And that callback is going to give you

اسم السمة الذي تغيّر، القيمة القديمة،

three arguments, the attribute name that changed,

والقيمة الجديدة.

the old value, and the new value.

آخر سؤال، كيف تؤثر خاصية القراءة فقط على عنصر مخصص ، عندما أغير الخاصية المحمية من الخارج باستخدام شيء ما كالسمات؟

Last question is, how does the read-only property affect a custom element when I change that protected property from the outside using something like set attribute?

في هذه الحالة،

In that case, what you're going to see

ماستراه هو تحديث عنصر Dom،

is the DOM element is going to update,

لكن ستبقى الخاصية بداخله نفسها .

but the property inside of it is going to remain the same.

لذا إن كان لديك ربط لهذه الخاصية أو ما شابه،

So if you have a binding to that property or something

سيقبى هذا الربط كما كان.

like that, that binding is going to stay exactly as it was.

أسئلة رائعة، لوكاس.

So great questions, Lucas.

شكراً لإرسالها.

Thank you for sending those in.

إن كان لديك أسئلة، رجاءً دعها في التعليقات في الأسفل.

If you have questions, please leave them for us

سنحاول الإجابة على جميعها، وربما نعرضها في البرنامج

down in the comments. We'll try to answer them all-- maybe feature you on the show

ونعطيك بعض الهدايا.

and give you some swag.

كالعادة، شكراً للمشاهدة،

As always, thanks so much for watching

سأراكم في المرة القادمة.

and I'll see you next time.

Similar videos:

Polymer Starter Kit -- Polycasts #18
Google for Developers
45.6K views 428 likes 6 dislikes 15 Jun 201548% match

Create reusable elements with ease -- Polycasts #14
Google for Developers
17.7K views 149 likes 1 dislikes 21 Apr 201547% match

Go Offline -- Polycasts #19
Google for Developers
26.4K views 354 likes 8 dislikes 29 Jun 201546% match

Extending Native Elements -- Polycasts #15
Google for Developers
18.6K views 164 likes 3 dislikes 04 May 201546% match

Behaviors -- Polycasts #21
Google for Developers
25.5K views 273 likes 4 dislikes 15 Jul 201542% match

Give your element an API -- Polycasts #16
Google for Developers
22.9K views 242 likes 1 dislikes 18 May 201541% match

Scrolling at 60 frames with core-list -- Polycasts #12
Google for Developers
24.6K views 247 likes 4 dislikes 23 Mar 201540% match

Routing 101 -- Polycasts #10
Google for Developers
29.6K views 367 likes 4 dislikes 23 Feb 201540% match

Moar routing with... more-routing -- Polycasts #11
Google for Developers
22.9K views 206 likes 4 dislikes 09 Mar 201539% match

Iron Icons -- Polycasts #20 (100 Days of Google Dev)
Google for Developers
22.3K views 137 likes 1 dislikes 09 Jul 201539% match

Polymer 0.8: First Look -- Polycasts #13
Google for Developers
25.7K views 253 likes 7 dislikes 06 Apr 201535% match

Core Iconset -- Polycasts #02
Google for Developers
24.6K views 171 likes 2 dislikes 06 Oct 201435% match

Core Toolbar -- Polycasts #03
Google for Developers
34K views 265 likes 7 dislikes 20 Oct 201432% match

Core Icons -- Polycasts #01
Google for Developers
58K views 380 likes 5 dislikes 22 Sep 201429% match

Google Developers Channel - Trailer
Google for Developers
181.5K views 116 likes 21 dislikes 03 Sep 201528% match

The Awesome Power of Auto-Binding Templates -- Polycasts #08
Google for Developers
29.8K views 276 likes 5 dislikes 28 Jan 201527% match

What Deep Dream sees -- LazyWeb #12
Google for Developers
51.6K views 413 likes 27 dislikes 07 Jul 201526% match

Google Summer of Code: Organizations Apply
Google for Developers
28.4K views 206 likes 8 dislikes 19 Jan 201726% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201426% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201426% match

Getting started with Firebase and Android - Firecasts #1
Google for Developers
113.8K views 1.1K likes 19 dislikes 16 Feb 201624% match

Accessing Google APIs: Common code walkthrough
Google for Developers
45.9K views 188 likes 14 dislikes 13 Nov 201424% match

Google Play Services 8.3
Google for Developers
51K views 342 likes 37 dislikes 05 Nov 201524% match

Google I/O 2016 Highlights
Google for Developers
46.6K views 649 likes 15 dislikes 26 May 201624% match

VR & Cinema - Google I/O 2016
Google for Developers
76.6K views 683 likes 47 dislikes 19 May 201624% match

VR at Google - Google I/O 2016
Google for Developers
73K views 484 likes 16 dislikes 19 May 201624% match

An Introduction to Brillo, the OS for IoT
Google for Developers
64.4K views 215 likes 4 dislikes 27 Oct 201523% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201423% match

TensorFlow: Machine Learning for Everyone
Google for Developers
537.8K views 2.8K likes 59 dislikes 15 Feb 201723% match

DevBytes - Your App, At Scale with Google App Engine
Google for Developers
103.5K views 237 likes 4 dislikes 24 Mar 201423% match

Settings Privacy About Contact Donate