Marcy Sutton "Accessibility of Web Components" (ID24 2014)
Let, me start. With. Us. Okay. Alright, thanks, for that great introduction Brian. So. I'm trying to gain control here, from Carl, yep. Looks like that worked ok. Whoo. Let's, go. Greetings. Marklar. I am, marklar, marklar. At marklar. Let's. Kick things off with a marklar, a marklar. Walks into a marklar. Marklar, asks the marklar do you have any marklar, the. Marklar shakes as mark Lawrence's, know we only have marklar. You're. Probably asking yourself, at this point what, the marklar, is she talking, about well. This, has been an exercise in semantics. The. Meaning of, our words there, they're, necessary, if, we use the same word for everything. Be any meaning, so the same is true with our HTML. The. Same word would be useless over, and over. So. Today, we're gonna talk about a new technology web, components, which, runs the risks of polluting the Internet with a bunch of marklar, soulless. Div tags essentially, that don't communicate roller, purpose, and non visual users. As. Bryan. Said I'm Marcy, Sutton I'm not, a freelance, marklar, but rather a full-time, developer, at substantial, which is a company, here in Seattle, I've. Spent, the past few months expanding, my own skillset while improving the accessibility, of web applications, such as a fitness, app for personal trainers and a, whiskey recommendations. App because. Everybody, likes whisky right. Why. Shouldn't those applications, be accessible to everyone I. Grew. To love accessibility. At my previous job because, it added a valuable dimension, to my work it made, it feel less, like an everyday grind. Little. Lag here. Let's. Go back. So. Here we're looking at the mage tml and, it's. It's, pretty bad there's, every. Tag in this HTML is the same tag name marklar. We're. We've, got a background, image of a marklar, gif some, text about apples. Secret, development program, for the, intel, x86 microprocessor. Which, was actually called mark our code name we. Also have a what, looks like a link but the tag name is still marklar, and this. Is illustrating. That if every tag name was the same it, would not be very useful we'd, probably cringe, if we saw like. Substitute, marklar, for a div and you. Would cringe if you saw this so, it's definitely, not something that we should be doing. Today. We're going talk about web components which, is really, awesome new technology, I should preface this by saying that I am NOT an expert I don't work on specs all day I'm just, really curious and, I'm passionate about accessibility. So. The two parts of this that we're going to dive into I'm, going to be, more, specific about custom, elements and the shadow Dom. So. What are web component, they're new standards, moving through the w3c. The. Five parts that it's our custom elements, where. You can actually create your own tags which is awesome shadow. Dom. Templates. Which, is, super. Useful for templating. Content, on the client side you previously. Would have to do. Something, with like. Scripting, either a PHP or using grunt or some way to include. Partials. Of code there's, actually, a client-side, method for doing this now with templates. HTML. Imports is kind of similar you, can include a partial, of code just. Like you would include a stylesheet and a link tag but. You can include an HTML, file and it's a really, exciting way to work. For, front-end development and then, lastly, one. Part of the spec that's still.
Emerging, Or decorators. I don't. Know as much about them but my. Limited. Research made them look pretty awesome the idea is similar. In your CSS how you might, include a background. Image you. Could include, a snippet, of HTML in. Your CSS and, it would actually decorate. Your HTML, so, it's presentation. Related code but, rather, than just being limited to. CSS. Styling or applying a background image you could actually apply markup. Through your CSS, so. I'm really excited to see more about decorators. So. Why are we excited about web components why are there two talks about web components today I am, pretty excited about them it's, front-end developers we love to talk, about what's new in this, case web, components, mean that we can extend the Dom. We. Can act, we create. Our own elements. And we aren't waiting for browser and implementers. To create. The next form, input, or some, fancy. Button. Tack we can go and create our own and in. The case of shadow Dom we can minimize conflicts. If you're, implementing. A jQuery plug-in I don't know if you've ever done this but if you include, somebody else's JavaScript, and all, of a sudden your JavaScript, stops working because there was some conflict, maybe. Maybe. That plug-in is polluting, the global namespace and, that, causes, huge problems, well. A nice thing about shadow, Dom is that you can encapsulate code. To. Minimize conflicts, and the same goes for your. CSS, if you, had a rogue, plug-in, that the CSS, that came along with it they, defined. Styles, for generic. H1s, and h2s and, then after, you implemented, that plug-in it started messing with your CSS, that's, a huge bummer. It's override. And hell in CSS, so if you could minimize conflicts. By encapsulating, your, web components, that's, a pretty awesome way, to work. So. In. The case of custom elements if we were going to create our own tags. Which. I mentioned earlier in, this case I think it, would be pretty cool if you could make it talk of buttons that, when. You interact, with the taco buttons it. Gives you tacos so, here, we have a. Big, tag it just says X - taco button and the, dash is because a, requirement. Of naming your own elements, is that you, basically. Namespace. Them with a prefix, and then, a dash and then the name of your element, and this is going to prevent, in. Case they wanted to make a taco button later I guess. We. Can. Create. A collection of our own components. That start, with the prefix and then. When. I see Dale saying chrome is removing those prefixes, in yeah we'll see but. That's how it is right now so this. Element that I made the taco button if, I have. Through the page this. Is my custom and, custom. Version of her bljs for, my presentation, slide so, I've actually added, a few features to it. One. Of those was, that every. Slide is visible, if you, if. You just use it out of the box so I made, it so that only the current slide is visible, so. Let's, go, on to the button. Give. Me tacos a, little. Bit of a delay when I tab so, it's a little. Challenging. - there we go give me tacos so. I have this button it received focus, it, changed. Color it has an outline if I, hit the enter. Key. Sid. Wait for. The latency. Here but it should start giving us taco any, minute now I sure. Hope so. This. Morning. Give. Me tacos. Give. Me tacos. There. We go all right tacos. If. We just. Keep hitting Enter we should get more and more tacos, I'm. Just gonna let that go for a minute, whoa. Okay. Epilepsy, warning. I. Hit. Enter a few times with the lag. So, the idea here I'm, gonna refresh the page so that it's not so crazy. But. With the taco button here this is kind of a ridiculous, example, right like you. Don't need a button, to really give you tacos but one. Thing that you. We. Lost we. Lost Marcy's. Audio for a second there we'll, just give it right back all guys, for that. Marci, we get you back. You. Got me back now, yes we do. Well. I think sometimes. This. Application. Just is, like I'm done and it restarts, all. Right so whatever, yeah. Too many tacos I had over loaded, you attack us so what I was saying was. This. Element it's pretty contrived like it seems sort, of ridiculous, but it. Has all of the same elements, of one that you might want which is an autocomplete widget, so there's, a user control. The. Button and you could swap, that out for a text input or a search input and as. You, would, start typing in an autocomplete widget it would make asynchronous. Requests to. Pull, back results, and show them to you in this case I'm showing you taco gifts but. It's. Something where there's, multiple parts, and you. Always want it to do, the same behavior, like, make it a component that somebody could reuse and drop into a webpage that, would, be pretty awesome. So, I am seeing in the chat that definitely. Not getting rid of the custom element prefixes, from Alice who works at Google so. Yeah. Keep an eye on that I haven't. Really heard one way or the other except. That that's how it is right now. So. I mentioned. Marklar, earlier, if.
We Don't really do anything. When. We create these new elements they don't have any meaning they're basically just marklar, tags so. We. Really need to add. Some semantics. So. How do we add semantics, to these. Custom elements, well we, can extend a native element and here, we're looking at some JavaScript. We. First. Need to create. An object and. We're going to extend the HTML. Button element, and it's, prototype, so we create a variable with. An HTML, button, element prototype, and then we apply that to, an element. That we're going to create so, to. Actually get the semantics, we have to dynamically, create an element and append it to the page if you, have an element that's already in your markup, it, behaves a little differently I think there's, at. Least in my testing, I found that I have to actually generate, the tag and insert it into the page to get most of this behavior but. When. You're creating an element you, have to register the name so here we are registering, taco, - button and. Then. We apply the prototype, that we created. In our object earlier, and. And. Then we, append this thing to the page so. There's. Some, there's, some really interesting things going on here that are. Really important, rather than just extending, HTML, element, if you, extend, an existing element, then you can get some of its behavior, at, least that's the goal. So. Custom, elements, right now, they don't have very wide support but I really, like working with with. Native elements. That's what most of my research was done with even, though there are two polyfills, right now at, least that I'm aware of native. Support for custom elements right now is in Chrome and opera latest, and Firefox. Nightly I believe or Firefox, 30 which I assume is nightly and, there's. A great site are. We componentized. Yet that I've been checking for some of those stuff and, it's worth noting that everything. I'm talking about moves, so fast that it's really, hard to keep up with it I have. Found that. Presentations. I gave on this a month ago or already outdated so it, changes. Really fast and, what's. Really cool is that browser. Implementers, are hearing our call. And. Making. Changes, to these specs and the way they implement, them so if. Something. You know, for. Example I'm hearing people talking about the custom, element prefixes, like that's changing, really fast so we have to keep our eyes on it and remember. That what, I'm talking about right now will. Change really soon so. I. Mentioned there are two polyfills, there's. One from Mozilla called xTag and it. Has. A really, nice library that it gives you where you can. Rather. Than being, up in your elbows are, up to your elbows in native, JavaScript, you can use. A little bit of their. Their. Object creation method, so here we're, registering an X tag, element. Called X taco button and I'm using the X dash to. Indicate that at the next tag element, but. We, do a similar thing, at. Least in my case I extended, an HTML. That, should say button it says do, HTML. Button element prototype, there, documentation said, that if you put extends. And then the type of the element, that you want, to extend that that's, how you do it in X tag I found that it actually won't run if I include extends. Button, but. One. Thing that's really nice about their. Library, is that you get these life cycle callbacks methods. So there's created, inserted. Removed, attribute. Change and then, events, that look similar to say. If you use backbone, or spine jeaious you. Can wire up events, really easily so in. The case of my taco button and I wear it up a click event and a key down event so, that I could make sure that, my button would do what. It's supposed to which is show, me taco gifts. So. X tags pretty cool. There's. Another one called polymer. That. I am, excited, to hear Alice's talk later today because, my. Research I used, polymers. Shim. To expand. Support to more browsers but I haven't, done as much with creating elements in polymer so I just. Showed this as an example that there. Extends, method is a little different, in the, name.
Registration. Up here at the top it says extend button so, it's actually on, the tag instead, of in, the JavaScript, but I imagine you could do it either way I'm, really. Interested to see what, Ellis has to add on this topic but it's pretty similar, to x tag, they. Just structure their objects a little differently so pretty. Awesome so the idea of a colleague. Phil to. Add is that. In. The, case of the Shin you. Can guarantee. The. The. Element, the. Custom elements, and shadow Dom stuff that you're using is you. Can add support, to a, larger, number of browsers than, just those three that I mentioned, in the beginning the. Native, support is, pretty. Spotty because, these are such emerging, specs but. With, a with. A little help with a JavaScript, library you can expand, support and I'll, touch on which browsers, they support, a little later. So. Another, way that you can exceed command. X is to use native child elements, so, inside. Of a custom, element in this, case I'm making a taco surprise, element and it, doesn't really have any, semantics. Itself, on the wrapping tag. It's. Basically, just a div right now and that gets read aloud as a group at least in voiceover so. Inside. Of my taco surprise, element if I use heading, tags and buttons, and paragraphs. Or image, tags instead, of making a div. For a, button I just use a button then I can. Guarantee that I get all that behavior that's interactive, like, that's how you make something accessible. You. Just add, semantics, inside of the native child elements. And. Dale. Is adding that I like one h1 per page apparently, I do yeah, I don't think. That the html5. Heading algorithm, is really being. Used, we've. Kind, of determined. That because screen, readers aren't, supporting, it it's, you're. Kind of shooting yourself in the foot there if you want, to have a clear document, structure so I personally, believe only one h1 per page right now. So. Another, way I wanted to add this in here to. Add semantics, is you can always use attributes like, if you wanted. To add a, role. In my case, extending. Elements, isn't, really adding, the role I've found I need to do some more research and play with it some more but you. Can always just add an aria role so, if, there is an existing, native element that you want to extend or an, existing, behavior.
In. The case of button I could add role. Equals button and to. Get it to be. Interactive from the keyboard I can add tabindex, property, of. 0. I. Personally, believe that you should not use numbers, over 0 for tabindex, because it's too hard to manage your tab order. So. On the screen right now we have a taco, button element it has a role of button and tabindex, so that it'll be interactive, and, to. Register. Callbacks. On this so to enable events, I am, still creating. An element but, it's already in the markup so I've. Found that I can register. The, element, so, that it doesn't, come up as an unknown element but in order to, register. Callbacks, for events I. Need. To create, an element and reference. It in my JavaScript, but. I can get it to read as a button by adding a button role. In. Alex's. Asset or Alice is asking. If I added the role in the template or as the user adding those it's. Have index I think would be a good. Candidate, for adding. In your JavaScript, so, whenever you create, the element I think if you're creating, a button element with JavaScript, it's, certainly. Feasible that you could add tabindex with, JavaScript, and. The same with the role I think it's, just whatever. Gets. Read aloud in assistive, technology, is what we should do, and. If. If. Everything, you're doing to Stan, she ate a button, is in JavaScript then adding. Attributes with, it seems fine to me the. Last thing that the user would have to actually drop into there caca or, the end, developer. If they could just add taco, button and just, the tag name then. That's, less for them to forget and, we. Can just give. Them an element they can drop in it comes with some JavaScript, that JavaScript adds all the necessary attributes, and, that seems like a better workflow because you've accounted for that. And. Mike Moore is asking would adding the role in the jas result in a buffering issue and the assistive technology that's, a good question and what I was just wondering in. The case of tabindex, you can add it with JavaScript but I would, like to do. A little more testing about the role that's, a really good question. So. Wait, a minute we are talking about all of this really cool stuff, what. Happens in assistive technology, like, how did they how. To screen readers even, read, these elements, there's, we've. Talked about semantics, a little bit but I think it's worth talking, about how that stuff really works so. Especially. In the case of shadow DOM. Learning. Of all the stuff led me to read. A lot more about trees. As a data structure. And. There. Are a couple characteristics, of trees that are worth noting. They. Have a root value and sub, trees of children so, we can see on the screen I actually have a screenshot from a book on scheme the, language and it, has a root node and branching, off of it our child, node trees. There. Are no circles, here they don't meet each other so they branch off of some, root node it's an interesting characteristic, of this data structure that we interact with every day that's front-end developers, in the dom. Browsers. Are also really, complex. Applications. There are some of the most complex. Applications, out, there so the. Rendering. Engine flow, is super. Interesting when you start learning about web, components because. For. Me and asking, these questions about, accessibility I had to know how. They're being attached, to the page what, the screen reader experience, would be like where does that come in and the lifecycle of this so. This. Screenshot is from a really great article, from html5rocks. Called. How browsers work and it. Shows you how, hTML. Is parsed. And, tokenized, so they, take every tag, and create an object out of it and. That. Creates. The Dom tree in. This flow and we're looking at the WebKit specific, flow the Firefox, flow. Is a little different or the Gecko, so. When, the Dom tree is created, style, rules affect, the, tree, and. So. When these nodes are attached, if. A if, an element it has display:none, that. Can affect what. A screen reader gets that's how we, we. Prevent, hidden. Elements. From being read aloud in a screen reader is that if they aren't painted, through. This rendering process then. They're kept out of a screen reader experience, so. This flow is super interesting to, realize. How JavaScript. And Styles affect the, actual, objects, that are created and then handed off to assistive, technology, and the. Intricacies. Of this I could study, forever, like I am just learning how this works so I. Love. Talking about this stuff if you're interested, in learning more I would really recommend reading, the how browsers work article, I learned. Something new every time I read that. So. Getting. Into shadow Dom what, is shadow Dom it it, means that something is encapsulated. By hiding, a dom subtree under, a shadow root so. There. Is a shadow. Root is this new concept and shadow Dom I hadn't heard of it before so, the. Shadow root is actually the root node of a shadow tree if we go.
Back To our the trees we were looking at there, was a root value and then on each of the branches those, had a common. Parent so, if, you. Added. A dom subtree and, put, it in this new. Boundary. The. Root note of that is the shadow and. The. Actual encapsulation. Boundary. That's created we call the shadow boundary, and it's, a separation, between the, regular DOM and the shadow DOM and it's, specified by a set of rules and, those, rules seem to be changing quite, often, that's what I was saying, with. The specs they change, really often there was a property. That you can add in your JavaScript, when you created, a shadow Dom that. Was, called apply, author styles and it. Allowed you to cascade, your, CSS, into the shadow Dom through. From the larger document, they. Deprecated, that and I have yet to hear what replaced it but it was really useful if you, as the, document, owner wanted. Your your, stylesheet, to cascade into, the shadow Dom. Otherwise. When, you create these shadow, dom subtree. There. Are some CSS, properties, that cascade in and some that don't like the the font will, cascade in from the larger document, I. Think. Some colors, come in but not everything. Like it's, really strange so which, properties, come in and which don't through that boundary seems. Like. It might change and, this. Is the part of the, specs that seem. Like we aren't on solid ground so it'll. Be interesting to see where we land with that. One. Other term, I'd like to add is shadow. Host which. Is the element hosting, one or more shadow trees so, you can actually append more than one shadow Dom into, a node, in your document. So. We have a diagram, here from the w3c, shadow, Dom spec and, we. Can see a document. Tree on the left side and it has a shadow host which if, you think of a good example would be the video tag in html5, to. Create a video tag you just drop in the video tag you don't have to add the controls. The. Little speaker icon or. Any of that range stuff so. You. Drop in the video tag and if you have shadow Dom enabled, in your developer. Tools you can actually see all of the controls, that are the shadow Dom boundary, so, there's, an interesting graphic, here from a shadow. DOM spec that shows you the. Relationship. Between the, shadow host and the shadow root and then, the shadow, sub. Trees which are the children of for. Example the the, video tags, shadow, Dom so. It's. Worth going and looking at a video, tag in a in Chrome, or some browser where you can turn on shadow Dom and go and inspect all of these child elements, it's really interesting so. We've been using shadow, Dom under our noses for a while it's, just now that we can create our own shadow, Dom so. How. Do you create one we. Have some JavaScript here, it's really similar to the, custom, element code that we saw earlier except, that I'm after. We create, an element. And I'm just creating a generic, HTML, element, which, is what most of the examples show you how to do but if I needed add semantics, I might want to extend a different kind of an element like an HTML button. But.
After You create this element there's. A method, that you can call called, created, callback and you. Can add code. To run after the element is created in this case we're creating, an a shadow root with. The. Shadow, root. It's. This dot create shadow root and the function calls and then, after, that you can clone, content, into your shadow Dom and append it to the document. So. What. This does in effect is, it takes your existing. Node, and. Appends. A shadow dom, subtree into, it so the kind of the two magic, things here to make shadow dom happen in the, created callback event, or the, the callback you can say create shadow root and, then. The shadow root you append, content. Into it and in. This case I'm also registering, a taco, surprise, element. But. I think you could probably append, shadow Dom. Yeah. I need, to go back and visit this but in the way that I always did it I created a custom element I was, curious if you could add shadow Dom to. An existing, element I think you probably can. So. I have a little demo. Given. That we have some, difficulties. Earlier, I'm not sure that how. It's going to work with voiceover but. Let's. Open it and. A. Little. Warning if you go and look at these slides and I'm going to post them at the end this, demo, has a giant, gif on it like, really really big I intended, to only look at it on my local machine, but. We can go and look at this little, shadow, Dom widget that I've created. So. I'm going to open the. Developer. Tools. Sorry. Did you want me to turn on voiceover, because this, is gonna have. To go. Um, you, know I don't, think we need to we can just we, party. At 9:40, I think we can probably just look at the dev tools here and I can explain what we're looking at. Okay, so we're, looking at this demo and my. Idea for shadow Dom element, is, that, what, if you had a button that had multiple states and you. Just want to be able to drop in a single button but make it so that the user has, to engage it before, they can do. Anything so maybe it's like a nuclear detonator, and you. Know those switches you have to like flip a cover and, then you, can turn on a button well, in this case I made a an, explosions. Warning. Button that you have to slide to engage it kind of looks like the, unlock. Screen on an iPhone so. I made, a button. That you can tab on to. See. If I can actually tap on to it alright so I'm on this button I could use the mouse but I also made it so that you can use arrows, so. If I use the arrow keys and. Wait. Should. Start moving. Any. Day you know I. Promise. I made it work with the keyboard oh. There. Goes there, good okay we're. In the next phase yes. We really want explosions. Before, I show you this, giant. Gift, I'm. Going, to go. Zoom in here and look at our we, made a slider control, and. There. Is actually a shadow Dom here I think, we need to go and able it which is worth looking at in chrome you can show shadow Dom by going to the settings and the developer tools. Already. Enabled, you. Know I'm curious. They.
When, You enabled that before and maybe Alice Boxhall can, that have. They started hiding the shadow trees oh don't, have the shouted on flag on so there might be a flag required, as well, so. What, I wanted to show you here is that we have actually, there is a boundary, here but we're just seeing elements, they are just being upended into the page because, this. Is after. JavaScript. And CSS do, their thing like I was talking about earlier with the browser, rendering. Experience. The. Screen reader is presented, with a single tree so this, is accessible, because it, has, already, like. By the time the screen reader gets ahold of it it's one, happy, tree I like to joke about bob ross the artist, and how he would talk about happy. Little trees there's, one happy tree here because the. Screen reader is encountering, the page after rendering. Are. As. Rendered, is, the term so here, we have multiple buttons and, we're. Just getting one happy tree which is awesome so. Yeah. We're really ready now load, this those. The dev tools. It. Looks like we're using the polyfill. So, we're not seeing the shadow Dom but. The explosions. There's. Actually a gift. That's supposed to load in the background here I, like. Showing gifts, he's. Caught on to that yet with it. The. Idea here was that I created a web component that, had multiple parts, and, you. Engage it. The. Use case would be creating. A single tag that the user could have multiple, Steve, but they only have to drop in a single tag. So. It's, a little contrived as well but you can hopefully. Get an idea why, you might, create a custom, element or create a shadow Dom and in. The case of shadow Dom it would be to encapsulate. The. Document. Subtree. So that you don't have interference, with scripts or styles outside of the shadow Dom boundary. All. Right so. Current. Support of shadow DOM chrome. 25. It's. Been in there for a little while I think you have to enable a flag or turn, it on the dev tools but, it. Will actually render. The things of whether or not you can see the shadow, Dom boundary, and the developer, tools, that. Is why you might need a flag but in enable. Enabling. Shadow Dom in general, to actually create. The nodes it has, been in chrome for a little while according to can, I use comm so, if they're accurate up, for this coming from, Firefox. Is just now turning this on in their nightly. And. Then Chrome for Android as, well it's, worth noting, so there's lots of places you can go and check on support, and so I link to those in these slides. 4x. Tag they. With, their polyfill, they, expand support all the way back to Firefox 5 and, chrome 4 as. Far as I know you, can't, add a shadow, Dom through. Their library but it you, might be able to kind. Of pack it in there when you create a custom element and do kind of a mash up of native, JavaScript, and X tag JavaScript, I have a question out to Angelina. Favreau right now asking. More about that, so I'm, curious to know if people, are actually using shadow Dom with X tag but I couldn't. Really find any evidence, of that so, with X tag when, you. Use their polyfill, you can get support in Internet, Explorer back to 9 which.
Is In comparison, to polymer. Which is another really awesome pull polyfill. And platform, they, are, only ie 10 and above so if you were going to use this and you knew you if, you were going to create custom elements and you knew that you had to support ie9 I, mean. You can make a case that may be using. One polyfill, over another, it's. Worth looking at your. Analytics and. Seeing. Which. Browsers you need to support and go and look at what that polyfill, what. They can cover for you a, lot, of websites have, the luxury now of only supporting the latest but. It's. Not super realistic, I think we're leaving a lot of people out if we don't support, some of the older browsers in. The case of IE that's just always challenging, and really costly so the. Difference between 99, and a 10 can be quite a bit of development time. So. Some resources, here before, we wrap up I created. A little if, you click this. Short, URL it's HTTP. Colon slash slash tiny. Dot CC, slash. A11y. -, web - components. That's, the link to my slides and a, resources. File with a couple of specs and, nice. Websites I like looking at to learn more about the stuff and. I, believe that is it for the end if. You have any questions I am. All. Ears and, I hope to. Learn. More it's. Always a learning. Process because, like I said stuff, changes, so fast but it's. Not exactly solid, footing when you're doing a research on and working sex. Well. Thanks very much Marcy, I don't see any questions if you did not address during the presentation. I guess. We'll stick around just a minute if, anybody has any questions please feel free to mark, them down in the chat box any, box. Yeah. And if you ever have questions just, shout on on Twitter right I love Twitter it's such a great way to get in touch with browser, implementers. And. Spec. Writers and movers and shakers so if you ever have questions or, you. Know you saw something that's, changing, really already and you're like hey you should check, this out and reach out to me on Twitter it's at, Marcy Sutton I. Love. It so I would love to chat with you. Oh. Good. Question. I. Think. Yeah. Polymer, is 163. Camon if I'd. 48kg. Zip which is pretty big it is pretty big yeah and it's worth taking. A look at that in your environment when. You're creating. Projects. Like this, stuff you have to weigh like not, only browser support, but if you. Had. A concern, about performance. Or a load time you, should definitely, keep an eye on all of these resources that you're pulling in and if, there's one, polyfill. That does. The bare minimum number, of things you need and it's not as big and it supports your browser matrix. Then so. It should be decisions, that you make when you pull in these libraries, for. My research, I actually didn't use polymer. Tool platform, I only use their shin so that I could get support, beyond just, chrome latest and opera. I could, go and look at it in Internet Explorer. So. I think he wants more see again. Well. As she starts as she tries to get back and someone thank everybody for, any, presentation. Really appreciate, participation. I appreciate. You. Giving us this opportunity this. Concludes, the presentation for. Our. Accessible. Components.
2019-07-08 17:58
