diff --git a/resources/todomvc/todomvc-css/dist/index.css b/resources/todomvc/todomvc-css/dist/index.css index 67035a61e..7cb30fe5a 100644 --- a/resources/todomvc/todomvc-css/dist/index.css +++ b/resources/todomvc/todomvc-css/dist/index.css @@ -376,7 +376,7 @@ but useful for people who use screen readers */ } .todo-item-text { - word-break: break-all; + overflow-wrap: break-word; padding: 0 60px; display: block; line-height: 60px; diff --git a/resources/todomvc/todomvc-css/dist/index.min.css b/resources/todomvc/todomvc-css/dist/index.min.css index 9f5061d9c..e7bf2fe03 100644 --- a/resources/todomvc/todomvc-css/dist/index.min.css +++ b/resources/todomvc/todomvc-css/dist/index.min.css @@ -4,6 +4,6 @@ :host{display:block;box-shadow:none!important;}.topbar{position:relative;}.new-todo-input{padding:0 32px 0 60px;width:100%;height:68px;font-size:24px;line-height:1.4em;background:rgba(0,0,0,0.003);box-shadow:inset 0 -2px 1px rgba(0,0,0,0.03);}.new-todo-input::placeholder{font-style:italic;font-weight:400;color:rgba(0,0,0,0.4);}.toggle-all-container{width:45px;height:68px;position:absolute;left:0;top:0;}.toggle-all-input{width:45px;height:45px;font-size:0;position:absolute;top:11.5px;left:0;border:none;appearance:none;cursor:pointer;}.toggle-all-label{display:flex;align-items:center;justify-content:center;width:45px;height:68px;font-size:0;position:absolute;top:0;left:0;cursor:pointer;}.toggle-all-label::before{content:"❯";display:inline-block;font-size:22px;color:#949494;padding:10px 27px 10px 27px;transform:rotate(90deg);}.toggle-all-input:checked + .toggle-all-label::before{color:#484848;}@media screen and (-webkit-min-device-pixel-ratio:0){.toggle-all-input{background:none;}}html[dir="rtl"] .new-todo-input,:host([dir="rtl"]) .new-todo-input{padding:0 60px 0 32px;}html[dir="rtl"] .toggle-all-container,:host([dir="rtl"]) .toggle-all-container{right:0;left:unset;} :host{display:block;box-shadow:none!important;}.main{position:relative;} :host{display:block;box-shadow:none!important;}.todo-list{margin:0;padding:0;list-style:none;display:block;border-top:1px solid #e6e6e6;} -:host{display:block;box-shadow:none!important;}:host(:last-child) > .todo-item{border-bottom:none;}.todo-item{position:relative;font-size:24px;border-bottom:1px solid #ededed;height:60px;}.todo-item.editing{border-bottom:none;padding:0;}.edit-todo-container{display:none;}.todo-item.editing .edit-todo-container{display:block;}.edit-todo-input{padding:0 16px 0 60px;width:100%;height:60px;font-size:24px;line-height:1.4em;background:rgba(0,0,0,0.003);box-shadow:inset 0 -2px 1px rgba(0,0,0,0.03);background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20%20style%3D%22opacity%3A%200.2%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center left;}.display-todo{position:relative;}.todo-item.editing .display-todo{display:none;}.toggle-todo-input{text-align:center;width:40px;height:auto;position:absolute;top:0;bottom:0;left:3px;margin:auto 0;border:none;appearance:none;cursor:pointer;}.todo-item-text{word-break:break-all;padding:0 60px;display:block;line-height:60px;transition:color 0.4s;font-weight:400;color:#484848;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center left;}.toggle-todo-input:checked + .todo-item-text{color:#949494;text-decoration:line-through;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");}.remove-todo-button{display:none;position:absolute;top:0;right:10px;bottom:0;width:40px;height:40px;margin:auto 0;font-size:30px;color:#949494;transition:color 0.2s ease-out;cursor:pointer;}.remove-todo-button:hover,.remove-todo-button:focus{color:#c18585;}.remove-todo-button::after{content:"×";display:block;height:100%;line-height:1.1;}.todo-item:hover .remove-todo-button{display:block;}@media screen and (-webkit-min-device-pixel-ratio:0){.toggle-todo-input{background:none;height:40px;}}@media (max-width:430px){.remove-todo-button{display:block;}}html[dir="rtl"] .toggle-todo-input,:host([dir="rtl"]) .toggle-todo-input{right:3px;left:unset;}html[dir="rtl"] .todo-item-text,:host([dir="rtl"]) .todo-item-text{background-position:center right 6px;}html[dir="rtl"] .remove-todo-button,:host([dir="rtl"]) .remove-todo-button{left:10px;right:unset;} +:host{display:block;box-shadow:none!important;}:host(:last-child) > .todo-item{border-bottom:none;}.todo-item{position:relative;font-size:24px;border-bottom:1px solid #ededed;height:60px;}.todo-item.editing{border-bottom:none;padding:0;}.edit-todo-container{display:none;}.todo-item.editing .edit-todo-container{display:block;}.edit-todo-input{padding:0 16px 0 60px;width:100%;height:60px;font-size:24px;line-height:1.4em;background:rgba(0,0,0,0.003);box-shadow:inset 0 -2px 1px rgba(0,0,0,0.03);background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20%20style%3D%22opacity%3A%200.2%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center left;}.display-todo{position:relative;}.todo-item.editing .display-todo{display:none;}.toggle-todo-input{text-align:center;width:40px;height:auto;position:absolute;top:0;bottom:0;left:3px;margin:auto 0;border:none;appearance:none;cursor:pointer;}.todo-item-text{overflow-wrap:break-word;padding:0 60px;display:block;line-height:60px;transition:color 0.4s;font-weight:400;color:#484848;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center left;}.toggle-todo-input:checked + .todo-item-text{color:#949494;text-decoration:line-through;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");}.remove-todo-button{display:none;position:absolute;top:0;right:10px;bottom:0;width:40px;height:40px;margin:auto 0;font-size:30px;color:#949494;transition:color 0.2s ease-out;cursor:pointer;}.remove-todo-button:hover,.remove-todo-button:focus{color:#c18585;}.remove-todo-button::after{content:"×";display:block;height:100%;line-height:1.1;}.todo-item:hover .remove-todo-button{display:block;}@media screen and (-webkit-min-device-pixel-ratio:0){.toggle-todo-input{background:none;height:40px;}}@media (max-width:430px){.remove-todo-button{display:block;}}html[dir="rtl"] .toggle-todo-input,:host([dir="rtl"]) .toggle-todo-input{right:3px;left:unset;}html[dir="rtl"] .todo-item-text,:host([dir="rtl"]) .todo-item-text{background-position:center right 6px;}html[dir="rtl"] .remove-todo-button,:host([dir="rtl"]) .remove-todo-button{left:10px;right:unset;} :host{display:block;box-shadow:none!important;}.bottombar{padding:10px 0;height:41px;text-align:center;font-size:15px;border-top:1px solid #e6e6e6;position:relative;}.bottombar::before{content:"";position:absolute;right:0;bottom:0;left:0;height:50px;overflow:hidden;pointer-events:none;box-shadow:0 1px 1px rgba(0,0,0,0.2),0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0,0,0,0.2),0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0,0,0,0.2);}.todo-status{text-align:left;padding:3px;height:32px;line-height:26px;position:absolute;left:12px;top:50%;transform:translateY(-50%);}.todo-count{font-weight:300;}.filter-list{margin:0;padding:0;list-style:none;display:inline-block;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);}.filter-item{display:inline-block;}.filter-link{color:inherit;margin:3px;padding:0 7px;text-decoration:none;border:1px solid transparent;border-radius:3px;cursor:pointer;display:block;height:26px;line-height:26px;}.filter-link:hover{border-color:#db7676;}.filter-link.selected{border-color:#ce4646;}.clear-completed-button,.clear-completed-button:active{text-decoration:none;cursor:pointer;padding:3px;height:32px;line-height:26px;position:absolute;right:12px;top:50%;transform:translateY(-50%);}.clear-completed-button:hover{text-decoration:underline;}html[dir="rtl"] .todo-status,:host([dir="rtl"]) .todo-status{right:12px;left:unset;}html[dir="rtl"] .clear-completed-button,:host([dir="rtl"]) .clear-completed-button{left:12px;right:unset;}@media (max-width:430px){.bottombar{height:120px;}.todo-status{display:block;text-align:center;position:relative;left:unset;right:unset;top:unset;transform:unset;}.filter-list{display:block;position:relative;left:unset;right:unset;top:unset;transform:unset;}.clear-completed-button,.clear-completed-button:active{display:block;margin:0 auto;position:relative;left:unset;right:unset;top:unset;transform:unset;}html[dir="rtl"] .todo-status,:host([dir="rtl"]) .todo-status{right:unset;left:unset;}html[dir="rtl"] .clear-completed-button,:host([dir="rtl"]) .clear-completed-button{left:unset;right:unset;}} :host{display:block;box-shadow:none!important;}.footer{margin:65px auto 0;color:#4d4d4d;font-size:11px;text-shadow:0 1px 0 rgba(255,255,255,0.5);text-align:center;}.footer-text{line-height:1;}.footer-link{color:inherit;text-decoration:none;font-weight:400;}.footer-link:hover{text-decoration:underline;} \ No newline at end of file diff --git a/resources/todomvc/todomvc-css/dist/todo-item.constructable.js b/resources/todomvc/todomvc-css/dist/todo-item.constructable.js index 7b41f6b8a..59dba7f77 100644 --- a/resources/todomvc/todomvc-css/dist/todo-item.constructable.js +++ b/resources/todomvc/todomvc-css/dist/todo-item.constructable.js @@ -64,7 +64,7 @@ sheet.replaceSync(`:host { } .todo-item-text { - word-break: break-all; + overflow-wrap: break-word; padding: 0 60px; display: block; line-height: 60px; diff --git a/resources/todomvc/todomvc-css/dist/todo-item.css b/resources/todomvc/todomvc-css/dist/todo-item.css index 9f668658a..59e1936e6 100644 --- a/resources/todomvc/todomvc-css/dist/todo-item.css +++ b/resources/todomvc/todomvc-css/dist/todo-item.css @@ -65,7 +65,7 @@ } .todo-item-text { - word-break: break-all; + overflow-wrap: break-word; padding: 0 60px; display: block; line-height: 60px; diff --git a/resources/todomvc/todomvc-css/dist/todo-item.module.css b/resources/todomvc/todomvc-css/dist/todo-item.module.css index 9f668658a..59e1936e6 100644 --- a/resources/todomvc/todomvc-css/dist/todo-item.module.css +++ b/resources/todomvc/todomvc-css/dist/todo-item.module.css @@ -65,7 +65,7 @@ } .todo-item-text { - word-break: break-all; + overflow-wrap: break-word; padding: 0 60px; display: block; line-height: 60px; diff --git a/resources/todomvc/todomvc-css/src/css/todo-item.css b/resources/todomvc/todomvc-css/src/css/todo-item.css index 9f668658a..59e1936e6 100644 --- a/resources/todomvc/todomvc-css/src/css/todo-item.css +++ b/resources/todomvc/todomvc-css/src/css/todo-item.css @@ -65,7 +65,7 @@ } .todo-item-text { - word-break: break-all; + overflow-wrap: break-word; padding: 0 60px; display: block; line-height: 60px; diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-item/todo-item.component.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-item/todo-item.component.js index b975f3a03..a082628a8 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-item/todo-item.component.js +++ b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-item/todo-item.component.js @@ -7,15 +7,18 @@ import itemStyles from "../../styles/todo-item.constructable.js"; class TodoItem extends HTMLElement { static get observedAttributes() { - return ["id", "title", "completed"]; + return ["itemid", "itemtitle", "itemcompleted"]; } constructor() { super(); - this.id = ""; - this.title = "Todo Item"; - this.completed = "false"; + // Renamed this.id to this.itemid and this.title to this.itemtitle. + // When the component assigns to this.id or this.title, this causes the browser's implementation of the existing setters to run, which convert these property sets into internal setAttribute calls. This can have surprising consequences. + // [Issue]: https://github.com/WebKit/Speedometer/issues/313 + this.itemid = ""; + this.itemtitle = "Todo Item"; + this.itemcompleted = "false"; const node = document.importNode(template.content, true); this.item = node.querySelector(".todo-item"); @@ -51,18 +54,18 @@ class TodoItem extends HTMLElement { update(...args) { args.forEach((argument) => { switch (argument) { - case "id": - if (this.id !== undefined) - this.item.id = `todo-item-${this.id}`; + case "itemid": + if (this.itemid !== undefined) + this.item.id = `todo-item-${this.itemid}`; break; - case "title": - if (this.title !== undefined) { - this.todoText.textContent = this.title; - this.editInput.value = this.title; + case "itemtitle": + if (this.itemtitle !== undefined) { + this.todoText.textContent = this.itemtitle; + this.editInput.value = this.itemtitle; } break; - case "completed": - this.toggleInput.checked = this.completed === "true" ? true : false; + case "itemcompleted": + this.toggleInput.checked = this.itemcompleted === "true" ? true : false; break; } }); @@ -70,7 +73,7 @@ class TodoItem extends HTMLElement { startEdit() { this.item.classList.add("editing"); - this.editInput.value = this.title; + this.editInput.value = this.itemtitle; this.editInput.focus(); } @@ -85,11 +88,11 @@ class TodoItem extends HTMLElement { toggleItem() { // The todo-list checks the "completed" attribute to filter based on route // (therefore the completed state needs to already be updated before the check) - this.setAttribute("completed", this.toggleInput.checked); + this.setAttribute("itemcompleted", this.toggleInput.checked); this.dispatchEvent( new CustomEvent("toggle-item", { - detail: { id: this.id, completed: this.toggleInput.checked }, + detail: { id: this.itemid, completed: this.toggleInput.checked }, bubbles: true, }) ); @@ -100,7 +103,7 @@ class TodoItem extends HTMLElement { // (therefore the removal has to happen after the list is updated) this.dispatchEvent( new CustomEvent("remove-item", { - detail: { id: this.id }, + detail: { id: this.itemid }, bubbles: true, }) ); @@ -108,14 +111,14 @@ class TodoItem extends HTMLElement { } updateItem(event) { - if (event.target.value !== this.title) { + if (event.target.value !== this.itemtitle) { if (!event.target.value.length) { this.removeItem(); } else { - this.setAttribute("title", event.target.value); + this.setAttribute("itemtitle", event.target.value); this.dispatchEvent( new CustomEvent("update-item", { - detail: { id: this.id, title: event.target.value }, + detail: { id: this.itemid, title: event.target.value }, bubbles: true, }) ); @@ -153,7 +156,7 @@ class TodoItem extends HTMLElement { } connectedCallback() { - this.update("id", "title", "completed"); + this.update("itemid", "itemtitle", "itemcompleted"); this.keysListeners.push( useKeyListener({ diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-list/todo-list.component.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-list/todo-list.component.js index cdc8bf611..8e90e291f 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-list/todo-list.component.js +++ b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/components/todo-list/todo-list.component.js @@ -33,8 +33,12 @@ class TodoList extends HTMLElement { } addItem(entry) { + const { id, title, completed } = entry; const element = new TodoItem(); - Object.keys(entry).forEach((key) => element.setAttribute(key, entry[key])); + + element.setAttribute("itemid", id); + element.setAttribute("itemtitle", title); + element.setAttribute("itemcompleted", completed); const elementIndex = this.#elements.length; this.#elements.push(element); @@ -48,18 +52,18 @@ class TodoList extends HTMLElement { removeCompletedItems() { this.#elements = this.#elements.filter((element) => { - if (element.completed === "true") + if (element.itemcompleted === "true") element.removeItem(); - return element.completed === "false"; + return element.itemcompleted === "false"; }); } toggleItems(completed) { this.#elements.forEach((element) => { - if (completed && element.completed === "false") + if (completed && element.itemcompleted === "false") element.toggleInput.click(); - else if (!completed && element.completed === "true") + else if (!completed && element.itemcompleted === "true") element.toggleInput.click(); }); } @@ -74,10 +78,10 @@ class TodoList extends HTMLElement { updateView(element) { switch (this.#route) { case "completed": - element.style.display = element.completed === "true" ? "block" : "none"; + element.style.display = element.itemcompleted === "true" ? "block" : "none"; break; case "active": - element.style.display = element.completed === "true" ? "none" : "block"; + element.style.display = element.itemcompleted === "true" ? "none" : "block"; break; default: element.style.display = "block"; @@ -92,13 +96,12 @@ class TodoList extends HTMLElement { case "toggle-item": case "add-item": this.#elements.forEach((element) => { - if (element.id === id) + if (element.itemid === id) this.updateView(element); }); break; case "remove-item": - this.#elements = this.#elements.filter((element) => element.id !== id); - + this.#elements = this.#elements.filter((element) => element.itemid !== id); break; } } diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/styles/todo-item.constructable.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/styles/todo-item.constructable.js index 7b41f6b8a..59dba7f77 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/styles/todo-item.constructable.js +++ b/resources/todomvc/vanilla-examples/javascript-web-components-complex/dist/styles/todo-item.constructable.js @@ -64,7 +64,7 @@ sheet.replaceSync(`:host { } .todo-item-text { - word-break: break-all; + overflow-wrap: break-word; padding: 0 60px; display: block; line-height: 60px; diff --git a/resources/todomvc/vanilla-examples/javascript-web-components/dist/styles/todo-item.constructable.js b/resources/todomvc/vanilla-examples/javascript-web-components/dist/styles/todo-item.constructable.js index 7b41f6b8a..59dba7f77 100644 --- a/resources/todomvc/vanilla-examples/javascript-web-components/dist/styles/todo-item.constructable.js +++ b/resources/todomvc/vanilla-examples/javascript-web-components/dist/styles/todo-item.constructable.js @@ -64,7 +64,7 @@ sheet.replaceSync(`:host { } .todo-item-text { - word-break: break-all; + overflow-wrap: break-word; padding: 0 60px; display: block; line-height: 60px;